I'm using a component called 'SearchComponent' in 2 routes. In the first route, the component is styled a certain way - for example there are 3 input texts that are display:block so they stack against each other. In the other route, I would like the 3 input texts to be inline-blocks.
The question is, can I use routing to conditionally change a components style?
I was hoping that the #Component decorator has some conditional logic capabilities but from my readings, it isn't possible. If that was the case, then I could just use a separate styleUrl path.
Can anyone help with this?
Have you considered using route params? You could use some variable in the routes as a condition for the styling. For example:
https://fooServer/fooApp/#/main/YourComponent;type=search1
Variable type here could be string, boolean, etc.. You would set it during the route change from the previous component.
Then in ngOnInit() you would call this._route.snapshot.params['type']; to grab the value in the route param. Then in the template, add to the tag [attr.class]="type == search1? search1Class : search2Class"
Info on route params can be found here under the 'Route definition with a parameter' header.
Let me know if I misunderstood your question :)
Related
I suppose there are already existing answers and I will thank you even if you just paste the link for the existing thread. But anyway.
There are in React when I specify style prop I have pretty good autocompletion and validation.
For example
What do I want?
I want to implement the same logic for my variable.
For example, in the code below
const position: ProperType = 'staticcc';
I want to replace ProperType with a really suitable type. After which
VScode will underline position and told me that there are errors (because 'staticcc' is an invalid value for CSS position property)
VScode will propose autocompletion like in the screenshot above.
I suppose there should be a special library or smth like this with predefined types. I even have googled csstype, it works fine for objects which I suppose to pass as style props. But I need not object, I need a special type for special CSS property to assign to the special variable. And don't know-how.
install csstype and
import * as CSS from 'csstype';
const position: CSS.Property.Position = 'static'
I'm working on a dynamic project which is adding or changing the route urls.
For example:
I want to add sub application route like AppName/{controller}/{action}/{id}
or maybe a language information like {controller}/{action}/{id}/{language}
in this scenario, I can't touch to other routes and I have to override them.
I tried to foreach RouteTable.Routes and there is no editable values for added routes.
Thanks for any help.
I found the solution.
I cast the items in the RouteTable.Routes to Route object :)
I am building a form using the awesome angular-schema-form. I am able to create my form schema object quite successfully. I am wanting (hoping) to be able to set all the form components in the schema using the x-schema-form property in the schema object.
I am able to specify the type and the titleMap's for selects all perfectly. However where I am having an issue is assigning a style to the element using the "x-schema-form" - it just seems to be being ignored.
So when I do the following (Note I have the Ionic Framework)
"x-schema-form": {
"type": "textarea",
"style": "item item-input"
}
The "style" is not getting passed to the form. If I pass the style in the $scope.form [] then I get the style. I am however trying to do this all in the schema as it would be much easier for me to do it in one place due to the nature in which I get the list of form elements.
Any advice on this would be greatly appreciated.
Thanks
BrentR
so asf doesn't actually support the style attribute at all, so what you're trying there is not possible at the moment. However you can use x-schema-form to apply a fieldHtmlClass and then via CSS apply styling.
You can read more on the standard options in the documentation. https://github.com/Textalk/angular-schema-form/blob/master/docs/index.md#standard-options
Is there a way to include an existing dom-element through Handlebars, while being able to keep a reference to said dom-element?
to explain:
I have a jquery-element $el of which I want to include the dom-element ($el[0]) in a handlebars template.
I have some jquery code that uses $el.html("new stuff") after handlebars has included the template (again: this template contains $el[0]
The usual solution would be to rewrite the code by providing a selector so jquery can access the element. However, the code that needs to change $el doesn't know where in the template $el[0] will be used, since this is configurable. Having to specify the selector by config is possible obviously but this doesn't really feel dry to me.
So, any way to do this?
I implemented this with a handlebars helper that injects a unique id and post-render keeps a ref from uniqueid -> element to bind.
On postrender I simply find the elements with the unique-ids and update each element to it's mapped el to bind.
I was wondering if you can change your style while lifetime?!
Example: Administrtor loggs into the app, chooses interface settings and finally changes the color of the overall header
That would be a nice component to do so: link
So is that possible? And can you give me a little hint how to do that :-)
Thank's
I had done this by having multiple css classes predefined and then on the back-end had a variable containing the current class in use.
You can then with an interface or some parameters, or user settings, etc, choose a class to give to the variable.
In my jsp page the code was something like this:
<div class="#{logEntry.styleClass}">
and the backend variable "styleClass" was of type String.