i am trying to change a css variable using a component but for some reason it doesn't work, any help ?
//work but i dont want to use the property background
<div class="planete" [ngStyle]="{'background': planete.planeteBackgroundColor }"></div>
/* this is what i'd like to do :
.SCSS
$my-var
/*...*/
background: $my-var;
HTLM:
// does not work
<div class="planete" [ngStyle]="{'$my-var': planete.planeteBackgroundColor }">
// second option:
.SCSS
--my-var
/*...*/
background: var(--my-var)
HTLM:
// does not work
<div class="planete" [ngStyle]="{'--my-var': planete.planeteBackgroundColor }">
Thanks for the reply
Have you tried?
<div class="planete" [ngStyle]="{'background': var(planeteBackgroundColor) }">
.SCSS
planeteBackgroundColor='FFFFFF'
But the easieast way to build dynamic theme should be:
<div class="planete" [ngStyle]="{'background': planeteBackgroundColor }">
and define variable in your component ts file:
planeteBackgroundColor='FFFFFF'
Related
Here is my checkbox in angular and i want to prevent the default behaviour of it.
<mat-checkbox (change)="changeSelectionTo()" [(ngModel)]="isChangeRule">Name</mat-checkbox>
Here whenever i click on name label...the checkbox gets toggled which i do not want to..
How can i prevent this from toggling when click on label . I have tried all others post too but I could not come up with the solution . I can not use jQuery.
Based on #Mike S. comment:
<mat-checkbox (change)="changeSelectionTo()" [(ngModel)]="isChangeRule">
<span (click)="myCheck($event)">Name</span>
</mat-checkbox>
in your component typescript code:
myCheck(event) {
event.preventDefault();
//YOUR LOGIC
}
you need to add label after completing the <mat-checkbox> tag.
According to your design, you can add style to the <mat-label>
Replace your line of code with the below shown code:
<div layout=row>
<mat-checkbox (change)="changeSelectionTo()" [(ngModel)]="isChangeRule"></mat-checkbox>
<mat-label> Name </mat-lable>
</div>
above image is generated by below code
<div align="left" class="user-modified-rule">
<div layout="row">
<mat-checkbox (change)="changeSelectionTo()" [(ngModel)]="isChangeRule">
</mat-checkbox>
<mat-label>
<rule></rule>
</mat-label>
</div>
</div>
and css code
.user-modified-rule {
display: inline-block;
width : 48%;
}
I am new to Angular, and I am trying to style items after the 6th child but it doesn't work. I can color everything, but when I add the nth-child part it doesn't work. Do I have a wrong syntax?
[ngStyle] = "div:nth-child(n+6){'background-color': 'red'}"
<p *ngIf = "status"> Secret Password is Tuna</p>
<div *ngFor="let clickLog of clickLogs"
[ngStyle]="div:nth-child(n+6){{'background-color': 'red'}}">
{{clickLog}}
</div>
<button (click)="clickEvent()">Show Details</button>
<button [disabled]="!checkIfEmty()" (click)="resetUserName()">Reser Username</button>
</div>
You can use pseudo class in the component CSS file.
app.component.css
div:nth-child(n+6) {
background-color: red
}
But you should have proper structure for it in template.
Or you can use index of ngFor.
app.component.ts
<div *ngFor="let clickLog of clickLogs; index as i"
[ngStyle]="{'background-color': i >= 6 ? 'red' : '' }">
{{clickLog}}
</div>
below is both simple sass code,an Angular 2 component accessing the sass code, and the rendered HTML. In my last span element, blueBig is not working as it should. I'm new to sass and I'm not sure why this simple example is not extending properly. Can anyone shed some light on this issue for me? Thank you!
Angular2 Component
#Component({
selector: 'test',
template: `
<h1> testing sass</h1>
<span [ngClass]="{blue : true}">This should be blue</span>
<br>
<span [ngClass]="{big: true}">This should be big</span>
<br>
<span [ngClass]="{blue : true, big: true }">This should be big and blue</span>
<br>
<span [ngClass]="{blueBig : true}"> this should be big and blue as well</span>
`,
styleUrls: ['assets/scss/testing-component.scss']
})
Sass
.blue{
color:blue;
}
.big{
font-size: 200%;
}
.blueBig{
#extend .blue;
#extend .big;
}
HTML
Rendered HTML
I compiled your Sass locally and it appears to be authored correctly.
Without being able to see the rendered HTML, my guess is that Angular is converting camelcase blueBig into kebab-case blue-big. Try putting quotes around the classname, i.e.
<span [ngClass]="{'blueBig' : true}">
Similar to Angular2 two-way data binding, I have a parent and a child component. In the parent I change the value that is passed to the child component via property. The property of the child is named percentage.
https://gist.github.com/ideadapt/59c96d01bacbf3222096
I want to bind the property value to a html attribute value. Like: <div style="width: {{percentage}}%">. I didn't find any syntax that worked. So I ended up using a change listener that does some manual DOM update:
this.progressElement = DOM.querySelector(element.nativeElement, '.progress');
DOM.setAttribute(this.progressElement, "style", `width: ${this.percentage}%`);
Is there a more elegant way to accomplish this?
You can use percentage binding for CSS properties: [style.width.%]
import {Component, Input} from 'angular2/core';
#Component({
selector: 'progress-bar',
template: `
<div class="progress-bar">
<div [style.width.%]="value"> {{ value }}% </div>
</div>
`,
})
export class ProgressBar {
#Input() private value: number;
}
Use NgStyle, which works similar to Angular 1. Since alpha-30, NgStyle is available in angular2/directives:
import {NgStyle} from 'angular2/directives';
Then include NgStyle in the directives list, this should work (here are some examples):
#View({
directives: [NgStyle]
template: `
<div class="all">
<div class="progress" [ng-style]="{'width': percentage + '%'}"></div>
<span class="label">{{percentage}}</span>
</div>
`
})
Alternatively and without using NgStyle, this would work well too:
<div class="progress" [style.width]="percentage + '%'"></div>
I have an element inside a polymer component and want to add a css class conditionally.
<div class="bottom {{completed: item.completed}}">
if item.isCompleted is true, then add the .completed class.
However, I've got the following error:
Invalid expression syntax: completed?: item.completed
I don't want to put the hole subtree inside a template conditional. Is it possible to do using an expression inside an html tag? I'm using the last polymer release, is this funtionallity migrated or replaced in any way?
The tokenlist technique was valid in Polymer 0.5, but has been deprecated.
As of Polymer 1.2, the following works:
<dom-module ...>
<template>
<div class$="bottom [[conditionalClass(item.completed)]]"></div>
</template>
<script>
Polymer({
...
conditionalClass: function(completed) {
return completed ? 'completed' : '';
}
});
<script>
</dom-module>
Also see similar question: Polymer 1.0 - Binding css classes
update Polymer 1.0
<div class$="[[getClasses(item.completed)]]">
getClasses: function (completed) {
var classes = 'bottom'
if(completed) classes += ' completed';
return classes;
}
Even when completed could be read from this.item.completed inside getClasses() it's important to pass it as parameter from the binding. This way Polymer re-evaluates the function getClasses(item.completed) each time item.completed changed.
original - Polymer 0.5
It should look like
<div class="bottom {{ {completed: item.completed } | tokenList }}">
See docs for more details: http://polymer-project.org/docs/polymer/expressions.html#tokenlist
the simplest way to do it:
<template>
<style is="custom-style">
.item-completed-true { background: red; }
</style>
<div class$="bottom item-completed-[[item.completed]]"></div>
</template>