NG Interview Set I - Styling Questions Flashcards
NG Interview Set I - Styling Questions
How would you select a custom component to style it?
- Using the
:host
pseudo-class selector in your component’s styles.
How do you reference the host of a component?
- Let DI inject an ElementRef into the constructor of your component
What pseudo-class selector targets styles in the element that hosts the component?
- The
:host pseudo class selector
How would you select all the child components’ elements?
- With the @ViewChildren decorator, like for example:
@ViewChildren(ChildDirective) viewChildren: QueryList < ChildDirective >
How would you select a css class in any ancestor of the component host element, all the way up to the document root?
- Using the
:host-context()
pseudo-class selector
What selector force a style down through the child component tree into all the child component views?
Use the ::ng-deep
selector along with :host
pseudo-class selector
What does :host-context() pseudo-class selector target?
The :host-context()
selector looks for a CSS class in any ancestor of the component host element, up to the document root
What does the following css do? :host-context(.theme-light) h2 { background-color: red; }
- Will change this component’s background-color to red if the context of the host has the
.theme-light
class applied