We can use interpolation to write an input into the template:
#Component({
selector: 'tag',
inputs: ['color'],
template: `
<div id="test" style="background: {{color}}">
Some text
</div>
`,
})
class TestComponent {
}
My question is: Is it possible to get it (somehow) to work like this:
#Component({
selector: 'tag',
inputs: ['color'],
template: `
<div id="test">
Some text
</div>
`,
styles: ['#test { background: {{color}}; }'],
})
class TestComponent {
}
This last attempt does not work, and I cannot seem to find a way how to do it.
Thanks.
AFAIK you can't do that. Component styles metadata wouldn't have access to its Class variable. I'd better suggest you to go for ngClass/ngStyle
<div id="test" [ngStyle]="{ 'background': color }">
Some text
</div>
Related
I have a component to show a left box. This component changes a public flag "flagBlocoLateral" to identify if this box is visible or not.
import {Component, Input, OnInit} from '#angular/core';
#Component({
selector: 'app-bloco-lateral',
template: `
<div class="bloco-lateral" [ngClass]="{'bloco-lateral--aberto':flagBlocoLateral}">
<div class="bloco-lateral__conteudo" *ngIf="flagBlocoLateral">
<div class="row">
<div class="col-12">
<h4>Ajuda</h4>
</div>
<div class="col-12" [innerHTML]="textoInformativo">
</div>
</div>
</div>
<div class="bloco-lateral__menu">
<ul>
<li matTooltip="Ajuda" (click)="toggleBlocoLateral(!flagBlocoLateral)">
<fa-icon icon="info-circle"></fa-icon>
</li>
</ul>
</div>
</div>`
})
export class BlocoLateralComponent implements OnInit {
#Input()
textoInformativo: string;
flagBlocoLateral = false;
constructor() {
}
ngOnInit() {
}
toggleBlocoLateral(flag) {
this.flagBlocoLateral = flag;
}
}
In my typescript code I'm using my compontent and a public "flagBlocoLateral" property to call ngClass. If I call toggleBlocoLateral inside component, ngClass not working.
<app-bloco-lateral #blocoLateral></app-bloco-lateral>
<div class="bloco-central" [ngClass]="blocoLateral.flagBlocoLateral ? 'bloco-central--resize':''">
But if I try print the "flagBlocoLateral" property outside the component (using {{blocoLateral.flagBlocoLateral}}), the attribute ngClass works fine.
Any Ideas?
Thanks.
Try to negate the value directly inside the called method and not by handing in a parameter. This step is actually not necessary.
In your HTML-File:
<li matTooltip="Ajuda" (click)="toggleBlocoLateral()">
In your TS-File:
toggleBlocoLateral() {
this.flagBlocoLateral = !this.flagBlocoLateral;
}
I just came across a strange behaviour in Angular 4. I have the following component:
#Component({
selector: 'user-wallets',
templateUrl: './user-wallets.component.html',
styleUrls: [
'./user-wallets.scss'
]
})
export class UserWalletsComponent implements OnInit, OnDestroy {
<!-- component logic... -->
}
In that template I have the following markup:
<div class="user-wallets">
<h2>
<span jhiTranslate="coinlenderApp.userWallets.home.title">Wallets</span>
</h2>
<jhi-alert></jhi-alert>
<ngb-tabset>
<ngb-tab *ngFor="let userAccountArr of sourceSystemsUserAccounts">
<ng-template ngbTabTitle>
{{ userAccountArr[0].sourceSystem.name }}
</ng-template>
<ng-template ngbTabContent>
<div class="row">
<div class="col-md-12 charts-col">
Charts here
</div>
</div>
</ng-template>
</ngb-tab>
</ngb-tabset>
</div>
Now, in the associated stylesheet (SCSS) I have the following styles:
.charts-col {
background: black;
}
.tab-pane {
float: left;
min-width: 300px;
background: black;
}
The code is working correctly and the tabs are correctly rendered. There's no error in the console.
Now the strange thing is, that the style for .charts-col is correctly applied, but the styles for .tab-pane is not.
.tab-pane is a generated DOM-object out of .
However, when I put exactly the same styles for .tab-pane in my global.scss, then the styles get applied.
Now my question is: Whey does the styles for .charts-col get applied and not the one for .tab-pane (which is generally working in global.scss, but not in the specific styles for the component)?
I am trying to use [ngClass] in Angular and seems like it is not getting applied. Surprising [ngStyle] for similar css styles are working. Waht am I doing wrong here? There is no error in the console. When I do check the dev tools the classes are being applied to the tag but not in the browser view. I have tried all different options - class, [class], [ngClass], ngClass. I have also tried both className and ngClass.
Please find the plunker attached for reference:
https://plnkr.co/edit/ipMxdTzoHUl5YCPJSpLT?p=preview
#Component({
selector: 'aboutus',
template:`
<span class="classone classtwo">{{vari.title}}</span>
<br>
<div ngClass="['classone','classtwo']">{{vari.title}}</div>
<br>
<div [ngClass]="['classone','classtwo']">{{vari.title}}</div>
<br>
<div [className]="classdef">{{vari.title}}</div>
`,
styles: [`
.classone{
font-weight: 'normal' !important;
}
.classtwo{
font-size: '40px' !important;
}
`
]
})
export class AboutusComponent implements OnInit, OnDestroy {
vari: any = {title: 'test'}
classdef: any[] = ['classone', 'classtwo']
constructor() { }
}
Issue is in your css.
replace this
.classtwo{
font-size: '40px' !important;
}
to
.classtwo{
font-size: 40px !important;
}
//our root app component
import {Component, NgModule, VERSION, OnInit, OnDestroy} from '#angular/core'
import {BrowserModule} from '#angular/platform-browser'
import {CommonModule} from '#angular/common'
#Component({
selector: 'my-app',
template:`
<span class="classone classtwo">{{vari.title}}</span>
<br>
<div ngClass="['classone','classtwo']">{{vari.title}}</div>
<br>
<div [ngClass]="['classone','classtwo']">{{vari.title}}</div>
<br>
<div [className]="classdef">{{vari.title}}</div>
`,
styles: [`
.classone{
font-weight: normal !important;
}
.classtwo{
font-size: 40px !important;
}
`
]
})
https://plnkr.co/edit/acLvnOvezEFI4EXjKbVx?p=preview
i am creating plunker it will help you
code in your html
<div>
<h2 [ngClass]='{"active":true}'>Hello {{name}}</h2>
</div>
Here i have 2 .cshtml file that is Index And About page in Index page
app.components.ts
import { Component } from '#angular/core';
#Component({
selector: 'my-app',
template: `<h1>HelloHell {{name}}</h1>`
})
export class AppComponent {
name = 'Angular';}
Index.cshtml
<div class="row">
<div class="col-md-4">
<!-- Angular2 Code -->
<my-app>Loading.........</my-app>
</div>
</div>
Here its Working fine
But when i take another .ts file
import { Component } from '#angular/core';
#Component({
selector: 'my-Sajee',
template: `<h1>Hello {{name}}</h1>`
})
export class AppComponent { name = 'Hello Sajeethrav'; }
About.cshtml
<div class="row">
<div class="col-md-4">
<!-- Angular2 Code -->
<my-Sajee>Loading...</my-Sajee>
<!-- Angular2 Code -->
</div>
</div>
Its Throughing An Error As EXCEPTION: Error in :0:0 caused by: The selector "my-app" did not match any elements
I tried to include css for children element included in a component via ng-content. It seems to be not implemented yet in Angular 2 or maybe someone has got a solution except to put css in a general stylesheet ?
app.component.ts
<comp-parent>
<comp-child></comp-child>
</comp-parent>
compParent.component.html
<div class="wrapper">
<ng-content></ng-content>
</div>
compParent.component.css
.wrapper > comp-child {
margin-right: 5px; <-- Not applied !!!
}
You can use /deep/ (deprecated) or >>> or ::ng-deep selector:
https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep
E.g.:
.wrapper ::ng-deep comp-child { ... }
Note that >>> seems to not work for projects based on angular-cli.
Apply classes to the html which is going to be rendered.
app.component.ts
<comp-parent>
<comp-child></comp-child>
</comp-parent>
#Component({
selector: 'comp-parent',
template: `
<div class="wrapper">
<ng-content></ng-content>
</div>
`
})
export class CompParent { }
#Component({
selector: 'comp-child',
template: `
<div class="comp-child">
<div>
</div>
</div> `,
})
export class CompChild {}
/// In styles.css
.wrapper .comp-child {
margin-left: 50px;
}
This worked for me in my project.