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>
Related
I have a very simple div in my footer:
import React from "react";
import { useHistory } from "react-router-dom";
import style from "./DesktopFooter.module.css";
const DesktopFooter = () => {
const history = useHistory();
return (
<div className={style.container}>
<div className={style.footerNav} id="phoneNumber">
999-999-9999
</div>
<div className={style.footerNav}>
</div>
<div className={style.footerNav}></div>
</div>
);
};
export default DesktopFooter;
In my CSS I want to style both on the class and id:
.footerNav {
width: 50%;
display: flex;
}
#phoneNumber {
font-size: 2rem;
}
However my component is not recognizing the id styling I try to apply.
Could anyone point me in the right direction.
Ya, After you update a question, I found the issue, you are try to load style for id as normal Dom, but its will not work since you are not include css file as is, you are import style file to style param...
so, what you need to do is replace id="PhoneNumber" to this
<div className={styles["footerNav"]} id={styles["phoneNumber"]}>
999-999-9999
</div>
Check the demo url
Full Code:
import React from "react";
import style from "./MyComponent.module.css";
export default function App() {
return (
<div className={style.container}>
<div className={style["footerNav"]} id={style["phoneNumber"]}>
999-999-9999
</div>
<div className={style.footerNav}></div>
<div className={style.footerNav}></div>
</div>
);
}
I would suggest having it as either a class or an id. Classes usually have a higher priority, meaning that the id will be ignored.
This is what it should look like:
.phoneNumber {
font-size: 2rem;
width: 50%;
display: flex;
}
<div class = "phoneNumber">999-999-9999</div>
However, if you would like to get around this, I would use another element within the div, such as:
#myID{
font-size: 2rem;
}
.phoneNumber {
width: 50%;
display: flex;
}
<div class = "phoneNumber">
<p id="myID"> 999-999-999 </p>
</div>
Ok I found a solution, or at least a work around. The problem seems to be that the file was a css module and not just a css file.
I changed the name of the css file from DesktopFooter.module.css to DesktopFooter.css
and I changed my import statement from
import style from "./DesktopFooter.module.css" to import "./DesktopFooter.css
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 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.
I'm trying to apply styling to a child component tag, but I can't do that.
I have child component with anchor tag.
Even though i have styling for anchor tag in the parent component, it's not applying. What's the solution for it?
Working code: http://plnkr.co/edit/CJCpV4ZbG7hdxT2AeSmt?p=preview
Google
In the parent component i'm using the child component and applying styling for this child component.
Html code:
<div class="container">
<div class="test">
<testapp></testapp>
</div>
</div>
Css code:
.container{
font-family:sans-serif;
font-size:18px;
border: 1px solid black;
}
.test{
width:50%;
background-color:#f0f5f5;
}
.container:hover .test{
background-color:#e6ffe6;
}
.container:hover .test:hover{
background-color:#ffffe6;
}
.container .test a {
color: red ;
}
.container .test a:hover {
color:green;
}
It's because by default components have view encapsulation (shadow dom). To disable this behavior, you can leverage the encapsulation attribute, as described below:
import {Component, ViewEncapsulation} from '#angular/core';
import {TestApp} from 'testapp.component.ts';
#Component({
selector:'test-component',
styleUrls: ['test.component.css'],
templateUrl: './test.component.html',
directives:[TestApp],
encapsulation: ViewEncapsulation.None // <------
})
export class TestComponent{
}
See this plunkr: http://plnkr.co/edit/qkhkfxPjgKus4WM9j9qg?p=preview.
When using the styleUrls property, the styles are local to the one component, not to its children. So I made two changes:
1) Moved the styleUrls to the testapp component.
2) Moved the div to the testapp component.
import {Component} from '#angular/core';
#Component({
selector:'testapp',
styleUrls: ['./test.component.css'],
template: `
<div class="test">
Google
</div>
`
})
export class TestApp{
}
EDITED: This should solve:
In the css of child class write below code
:host.parentclass childclass{
}
The parentclass is immediate parent of child. childclass is the class applied to child component.
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>