There are multiple ways to style a component in Angular. This slide was created for my talk at AngularIL August meet up and contains recepis for styling.

1. STYLING RECIPES
Nir Kaufman
FOR ANGULAR COMPONENTS

2. Nir Kaufman
Google Developer Expert
Frontend Consultant at 500Tech
Worldwide speaker & trainer
Community leader
@nirkaufman

5. MULTIPLE CHOICES

6. STYLES
& styleUrls

7. BEMhttp://getbem.com/introduction/

8. STYLEcss, scss, less, sass

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. ViewEncapsulation.Native
native components

16. CLASSES
& NgClass

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. STYLE
& NgStyle

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. HOSTS
& children

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-deep h2 {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-deep h2 {color: green}`],
template: `
<h1>Component Styling Recipes</h1>
<app-child></app-child>
`,
})
export class AppComponent {
public title: string;
} @HostBinding class

43. BINDING
TO STYLE

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. NEXT STEPS

47. ANGULAR SWAT
advanced Angular workshops.

48. @nirkaufman
THANK YOU!
ngnir.life