Page Comparison

...

• https://stackoverflow.com/questions/44077178/what-does-it-mean-to-bootstrap-an-angular-application

SCSS

Using CSS classes to style the parent div of a component

• Every component has a “parent” div that doesn’t show up in the actual template (.html) file, but shows up in the rendered HTML as <your-component-name>. Sometimes you may want to apply CSS classes to that div, but you can't just add class="your-class-name" in the template file because the div doesn’t show up there.

• If you want the class to always be applied, add a line like this to the top of your component’s class definition: @HostBinding('class.your-class-name')

• If you want the application of the CSS class to depend on a prop passed into the component, add a line like this: @HostBinding('class.your-class-name') useMyClassName: boolean = false;

• You will then need to update the SCSS file to have the selector as :host(.your-class-name) if you want SCSS rules nested within that class to work. Again, if you don’t add :host(), any nested rules just won’t show up.

  • More info: https://stackoverflow.com/questions/63529448/cannot-style-with-hostbinding-and-shadow-dom-encapsulation

Udemy - Max Schwarzmüller - Master Angular: The Complete Course

...