![@Component({
selector : 'app-root',
styleUrls: [`./app.component.css`],
template : `
<h1>Styled Components</h1>
`
})
external styles](https://image.slidesharecdn.com/stylingrecipesforangularcomponents-170821141056/75/Styling-recipes-for-Angular-components-9-2048.jpg)
![@Component({
selector : 'app-root',
styleUrls: [`./app.component.css`],
template : `
<h1>Styled Components</h1>
`
})
external styles](https://image.slidesharecdn.com/stylingrecipesforangularcomponents-170821141056/75/Styling-recipes-for-Angular-components-10-2048.jpg)
![@Component({
selector : 'app-root',
styles : [`h1 { color: red }`],
template : `
<h1>Styled Components</h1>
`
})
inline styles](https://image.slidesharecdn.com/stylingrecipesforangularcomponents-170821141056/75/Styling-recipes-for-Angular-components-11-2048.jpg)
![@Component({
selector : 'app-root',
styles : [`h1 { color: red }`],
template : `
<h1>Styled Components</h1>
`
})
inline styles](https://image.slidesharecdn.com/stylingrecipesforangularcomponents-170821141056/75/Styling-recipes-for-Angular-components-12-2048.jpg)
![@Component({
selector : 'app-root',
styleUrls: [`./app.component.css`],
styles : [`h1 { color: red }`],
template : `
<h1>Styled Components</h1>
`
})
both inline & external](https://image.slidesharecdn.com/stylingrecipesforangularcomponents-170821141056/75/Styling-recipes-for-Angular-components-13-2048.jpg)
![@Component({
selector : 'app-root',
styleUrls: [`./app.component.css`],
styles : [`h1 { color: red }`],
template : `
<h1>Styled Components</h1>
`
})
both inline & external](https://image.slidesharecdn.com/stylingrecipesforangularcomponents-170821141056/75/Styling-recipes-for-Angular-components-14-2048.jpg)
![@Component({
selector: 'app-root',
template: `
<h1 [class]="className">Styles Components!</h1>
`
})
export class AppComponent {
public className: string;
}
bind to class](https://image.slidesharecdn.com/stylingrecipesforangularcomponents-170821141056/75/Styling-recipes-for-Angular-components-17-2048.jpg)
![@Component({
selector: 'app-root',
template: `
<h1 [class]="className">Styles Components!</h1>
`
})
export class AppComponent {
public className: string;
}
bind to class](https://image.slidesharecdn.com/stylingrecipesforangularcomponents-170821141056/75/Styling-recipes-for-Angular-components-18-2048.jpg)
![@Component({
selector: 'app-root',
template: `
<h1 [class.text-danger]="flag">Styles Components!</h1>
`
})
export class AppComponent {
public flag: boolean;
}
bind to specific class](https://image.slidesharecdn.com/stylingrecipesforangularcomponents-170821141056/75/Styling-recipes-for-Angular-components-19-2048.jpg)
![@Component({
selector: 'app-root',
template: `
<h1 [class.text-danger]="flag">Styles Components!</h1>
`
})
export class AppComponent {
public flag: boolean;
}
bind to specific class](https://image.slidesharecdn.com/stylingrecipesforangularcomponents-170821141056/75/Styling-recipes-for-Angular-components-20-2048.jpg)
![@Component({
selector: 'app-root',
template: `
<h1 [ngClass]="className">Styles Components!</h1>
`
})
export class AppComponent {
public className: string;
}
ngClass: class name](https://image.slidesharecdn.com/stylingrecipesforangularcomponents-170821141056/75/Styling-recipes-for-Angular-components-21-2048.jpg)
![@Component({
selector: 'app-root',
template: `
<h1 [ngClass]="className">Styles Components!</h1>
`
})
export class AppComponent {
public className: string;
}
ngClass: class name](https://image.slidesharecdn.com/stylingrecipesforangularcomponents-170821141056/75/Styling-recipes-for-Angular-components-22-2048.jpg)
![@Component({
selector: 'app-root',
template: `
<h1 [ngClass]="classNames">Styles Components!</h1>
`
})
export class AppComponent {
public classNames: string[];
constructor() {
this.classNames = ['text-danger', 'display-1'];
}
} ngClass: array](https://image.slidesharecdn.com/stylingrecipesforangularcomponents-170821141056/75/Styling-recipes-for-Angular-components-23-2048.jpg)
![@Component({
selector: 'app-root',
template: `
<h1 [ngClass]="classNames">Styles Components!</h1>
`
})
export class AppComponent {
public classNames: string[];
constructor() {
this.classNames = ['text-danger', 'display-1'];
}
} ngClass: array](https://image.slidesharecdn.com/stylingrecipesforangularcomponents-170821141056/75/Styling-recipes-for-Angular-components-24-2048.jpg)
![@Component({
selector: 'app-root',
template: `
<h1 [ngClass]="getClasses()">Styles Components!</h1>
`
})
export class AppComponent {
public getClasses() {
return {
'text-danger': true,
‘display-1’ : true,
};
}
} ngClass: Object](https://image.slidesharecdn.com/stylingrecipesforangularcomponents-170821141056/75/Styling-recipes-for-Angular-components-25-2048.jpg)
![@Component({
selector: 'app-root',
template: `
<h1 [ngClass]="getClasses()">Styles Components!</h1>
`
})
export class AppComponent {
public getClasses() {
return {
'text-danger': true,
‘display-1’ : true,
};
}
} ngClass: Object](https://image.slidesharecdn.com/stylingrecipesforangularcomponents-170821141056/75/Styling-recipes-for-Angular-components-26-2048.jpg)
![@Component({
selector: 'app-root',
template: `
<h1 [style.color]=“backgroundColor">Title</h1>
`
})
export class AppComponent {
public color: string;
}
style: string](https://image.slidesharecdn.com/stylingrecipesforangularcomponents-170821141056/75/Styling-recipes-for-Angular-components-28-2048.jpg)
![@Component({
selector: 'app-root',
template: `
<h1 [style.color]=“backgroundColor">Title</h1>
`
})
export class AppComponent {
public color: string;
}
style: string](https://image.slidesharecdn.com/stylingrecipesforangularcomponents-170821141056/75/Styling-recipes-for-Angular-components-29-2048.jpg)
![@Component({
selector: 'app-root',
template: `
<h1 [ngStyle]="styles">Title</h1>
`
})
export class AppComponent {
public styles = {
color: 'red',
textDecoration: 'underline'
};
} ngStyle: object](https://image.slidesharecdn.com/stylingrecipesforangularcomponents-170821141056/75/Styling-recipes-for-Angular-components-30-2048.jpg)
![@Component({
selector: 'app-root',
template: `
<h1 [ngStyle]="styles">Title</h1>
`
})
export class AppComponent {
public styles = {
color: 'red',
textDecoration: 'underline'
};
} ngStyle: object](https://image.slidesharecdn.com/stylingrecipesforangularcomponents-170821141056/75/Styling-recipes-for-Angular-components-31-2048.jpg)
![@Component({
selector: 'app-root',
template: `
<h1 [ngStyle]="styles">Title</h1>
`
})
export class AppComponent {
public styles = {
color: 'red',
textDecoration: 'underline',
'fontSize.px' : 22
};
} ngStyle: object](https://image.slidesharecdn.com/stylingrecipesforangularcomponents-170821141056/75/Styling-recipes-for-Angular-components-32-2048.jpg)
![@Component({
selector: 'app-root',
template: `
<h1 [ngStyle]="styles">Title</h1>
`
})
export class AppComponent {
public styles = {
color: 'red',
textDecoration: 'underline',
'fontSize.px' : 22
};
} ngStyle: object](https://image.slidesharecdn.com/stylingrecipesforangularcomponents-170821141056/75/Styling-recipes-for-Angular-components-33-2048.jpg)
![@Component({
selector: ‘app-root',
styles: [` :host { color: blue } `],
template: `
<h1>Title</h1>
`
})
export class AppComponent {
public color: string;
} :host style](https://image.slidesharecdn.com/stylingrecipesforangularcomponents-170821141056/75/Styling-recipes-for-Angular-components-35-2048.jpg)
![@Component({
selector: ‘app-root',
styles: [` :host { color: blue } `],
template: `
<h1>Title</h1>
`
})
export class AppComponent {
public color: string;
} :host style](https://image.slidesharecdn.com/stylingrecipesforangularcomponents-170821141056/75/Styling-recipes-for-Angular-components-36-2048.jpg)
![@Component({
selector: ‘app-root',
styles: [` :host(.sky) { color: blue } `],
template: `
<h1>Title</h1>
`
})
export class AppComponent {
public color: string;
} :host class](https://image.slidesharecdn.com/stylingrecipesforangularcomponents-170821141056/75/Styling-recipes-for-Angular-components-37-2048.jpg)
![@Component({
selector: ‘app-root',
styles: [` :host(.sky) { color: blue } `],
template: `
<h1>Title</h1>
`
})
export class AppComponent {
public color: string;
} :host class](https://image.slidesharecdn.com/stylingrecipesforangularcomponents-170821141056/75/Styling-recipes-for-Angular-components-38-2048.jpg)
![@Component({
selector: 'app-root',
styles: [`:host(.green) {color: green}`],
template: `
<h1>Component Styling Recipes</h1>
<input type="checkbox"
(change)="flag = $event.target.checked">
`,
})
export class AppComponent {
@HostBinding('class.green') flag = false;
} @HostBinding class](https://image.slidesharecdn.com/stylingrecipesforangularcomponents-170821141056/75/Styling-recipes-for-Angular-components-39-2048.jpg)
![@Component({
selector: 'app-root',
styles: [`:host(.green) {color: green}`],
template: `
<h1>Component Styling Recipes</h1>
<input type="checkbox"
(change)="flag = $event.target.checked">
`,
})
export class AppComponent {
@HostBinding('class.green') flag = false;
} @HostBinding class](https://image.slidesharecdn.com/stylingrecipesforangularcomponents-170821141056/75/Styling-recipes-for-Angular-components-40-2048.jpg)
![@Component({
selector: 'app-root',
styles: [`::ng-deep h2 {color: green}`],
template: `
<h1>Component Styling Recipes</h1>
<app-child></app-child>
`,
})
export class AppComponent {
public title: string;
} @HostBinding class](https://image.slidesharecdn.com/stylingrecipesforangularcomponents-170821141056/75/Styling-recipes-for-Angular-components-41-2048.jpg)
![@Component({
selector: 'app-root',
styles: [`::ng-deep h2 {color: green}`],
template: `
<h1>Component Styling Recipes</h1>
<app-child></app-child>
`,
})
export class AppComponent {
public title: string;
} @HostBinding class](https://image.slidesharecdn.com/stylingrecipesforangularcomponents-170821141056/75/Styling-recipes-for-Angular-components-42-2048.jpg)
![@Component({
selector: 'app-root',
template: `
<h1 [style]="style">Component Styling Recipes</h1>
`,
})
export class AppComponent {
public style =`
background-color: red
`;
}
bind to style](https://image.slidesharecdn.com/stylingrecipesforangularcomponents-170821141056/75/Styling-recipes-for-Angular-components-44-2048.jpg)
![@Component({
selector: 'app-root',
template: `
<h1 [style]="style">Component Styling Recipes</h1>
`,
})
export class AppComponent {
constructor(private sanitizer: DomSanitizer) {}
public style = this.sanitizer.bypassSecurityTrustStyle(`
background-color: red
`);
}
bind to style](https://image.slidesharecdn.com/stylingrecipesforangularcomponents-170821141056/75/Styling-recipes-for-Angular-components-45-2048.jpg)
Uploaded byNir Kaufman
Styling recipes for Angular components
The document provides a comprehensive overview of styling techniques in Angular components, including the use of external styles, inline styles, and dynamic class binding through ngClass and ngStyle. It also details various scenarios for applying styles, such as using :host selectors and binding to specific styles programmatically. Additionally, it highlights advanced topics and next steps for further enhancing Angular styling and component management.
Styling recipes for Angular components
- 1. STYLING RECIPES Nir Kaufman FORANGULAR COMPONENTS
- 2. Nir Kaufman Google DeveloperExpert Frontend Consultant at 500Tech Worldwide speaker & trainer Community leader @nirkaufman
- 5.
- 6.
- 7.
- 8.
- 9. @Component({ selector : 'app-root', styleUrls:[`./app.component.css`], template : ` <h1>Styled Components</h1> ` }) external styles
- 10. @Component({ selector : 'app-root', styleUrls:[`./app.component.css`], template : ` <h1>Styled Components</h1> ` }) external styles
- 11. @Component({ selector : 'app-root', styles: [`h1 { color: red }`], template : ` <h1>Styled Components</h1> ` }) inline styles
- 12. @Component({ selector : 'app-root', styles: [`h1 { color: red }`], template : ` <h1>Styled Components</h1> ` }) inline styles
- 13. @Component({ selector : 'app-root', styleUrls:[`./app.component.css`], styles : [`h1 { color: red }`], template : ` <h1>Styled Components</h1> ` }) both inline & external
- 14. @Component({ selector : 'app-root', styleUrls:[`./app.component.css`], styles : [`h1 { color: red }`], template : ` <h1>Styled Components</h1> ` }) both inline & external
- 15.
- 16.
- 17. @Component({ selector: 'app-root', template: ` <h1[class]="className">Styles Components!</h1> ` }) export class AppComponent { public className: string; } bind to class
- 18. @Component({ selector: 'app-root', template: ` <h1[class]="className">Styles Components!</h1> ` }) export class AppComponent { public className: string; } bind to class
- 19. @Component({ selector: 'app-root', template: ` <h1[class.text-danger]="flag">Styles Components!</h1> ` }) export class AppComponent { public flag: boolean; } bind to specific class
- 20. @Component({ selector: 'app-root', template: ` <h1[class.text-danger]="flag">Styles Components!</h1> ` }) export class AppComponent { public flag: boolean; } bind to specific class
- 21. @Component({ selector: 'app-root', template: ` <h1[ngClass]="className">Styles Components!</h1> ` }) export class AppComponent { public className: string; } ngClass: class name
- 22. @Component({ selector: 'app-root', template: ` <h1[ngClass]="className">Styles Components!</h1> ` }) export class AppComponent { public className: string; } ngClass: class name
- 23. @Component({ selector: 'app-root', template: ` <h1[ngClass]="classNames">Styles Components!</h1> ` }) export class AppComponent { public classNames: string[]; constructor() { this.classNames = ['text-danger', 'display-1']; } } ngClass: array
- 24. @Component({ selector: 'app-root', template: ` <h1[ngClass]="classNames">Styles Components!</h1> ` }) export class AppComponent { public classNames: string[]; constructor() { this.classNames = ['text-danger', 'display-1']; } } ngClass: array
- 25. @Component({ selector: 'app-root', template: ` <h1[ngClass]="getClasses()">Styles Components!</h1> ` }) export class AppComponent { public getClasses() { return { 'text-danger': true, ‘display-1’ : true, }; } } ngClass: Object
- 26. @Component({ selector: 'app-root', template: ` <h1[ngClass]="getClasses()">Styles Components!</h1> ` }) export class AppComponent { public getClasses() { return { 'text-danger': true, ‘display-1’ : true, }; } } ngClass: Object
- 27.
- 28. @Component({ selector: 'app-root', template: ` <h1[style.color]=“backgroundColor">Title</h1> ` }) export class AppComponent { public color: string; } style: string
- 29. @Component({ selector: 'app-root', template: ` <h1[style.color]=“backgroundColor">Title</h1> ` }) export class AppComponent { public color: string; } style: string
- 30. @Component({ selector: 'app-root', template: ` <h1[ngStyle]="styles">Title</h1> ` }) export class AppComponent { public styles = { color: 'red', textDecoration: 'underline' }; } ngStyle: object
- 31. @Component({ selector: 'app-root', template: ` <h1[ngStyle]="styles">Title</h1> ` }) export class AppComponent { public styles = { color: 'red', textDecoration: 'underline' }; } ngStyle: object
- 32. @Component({ selector: 'app-root', template: ` <h1[ngStyle]="styles">Title</h1> ` }) export class AppComponent { public styles = { color: 'red', textDecoration: 'underline', 'fontSize.px' : 22 }; } ngStyle: object
- 33. @Component({ selector: 'app-root', template: ` <h1[ngStyle]="styles">Title</h1> ` }) export class AppComponent { public styles = { color: 'red', textDecoration: 'underline', 'fontSize.px' : 22 }; } ngStyle: object
- 34.
- 35. @Component({ selector: ‘app-root', styles: [`:host { color: blue } `], template: ` <h1>Title</h1> ` }) export class AppComponent { public color: string; } :host style
- 36. @Component({ selector: ‘app-root', styles: [`:host { color: blue } `], template: ` <h1>Title</h1> ` }) export class AppComponent { public color: string; } :host style
- 37. @Component({ selector: ‘app-root', styles: [`:host(.sky) { color: blue } `], template: ` <h1>Title</h1> ` }) export class AppComponent { public color: string; } :host class
- 38. @Component({ selector: ‘app-root', styles: [`:host(.sky) { color: blue } `], template: ` <h1>Title</h1> ` }) export class AppComponent { public color: string; } :host class
- 39. @Component({ selector: 'app-root', styles: [`:host(.green){color: green}`], template: ` <h1>Component Styling Recipes</h1> <input type="checkbox" (change)="flag = $event.target.checked"> `, }) export class AppComponent { @HostBinding('class.green') flag = false; } @HostBinding class
- 40. @Component({ selector: 'app-root', styles: [`:host(.green){color: green}`], template: ` <h1>Component Styling Recipes</h1> <input type="checkbox" (change)="flag = $event.target.checked"> `, }) export class AppComponent { @HostBinding('class.green') flag = false; } @HostBinding class
- 41. @Component({ selector: 'app-root', styles: [`::ng-deeph2 {color: green}`], template: ` <h1>Component Styling Recipes</h1> <app-child></app-child> `, }) export class AppComponent { public title: string; } @HostBinding class
- 42. @Component({ selector: 'app-root', styles: [`::ng-deeph2 {color: green}`], template: ` <h1>Component Styling Recipes</h1> <app-child></app-child> `, }) export class AppComponent { public title: string; } @HostBinding class
- 43.
- 44. @Component({ selector: 'app-root', template: ` <h1[style]="style">Component Styling Recipes</h1> `, }) export class AppComponent { public style =` background-color: red `; } bind to style
- 45. @Component({ selector: 'app-root', template: ` <h1[style]="style">Component Styling Recipes</h1> `, }) export class AppComponent { constructor(private sanitizer: DomSanitizer) {} public style = this.sanitizer.bypassSecurityTrustStyle(` background-color: red `); } bind to style
- 46.
- 47. ANGULAR SWAT advanced Angularworkshops.
- 48.