NG Interview Set I - Styling Questions Flashcards

NG Interview Set I - Styling Questions

1
Q

How would you select a custom component to style it?

A
  • Using the :host pseudo-class selector in your component’s styles.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

How do you reference the host of a component?

A
  • Let DI inject an ElementRef into the constructor of your component
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

What pseudo-class selector targets styles in the element that hosts the component?

A
  • The :host pseudo class selector
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

How would you select all the child components’ elements?

A
  • With the @ViewChildren decorator, like for example:

@ViewChildren(ChildDirective) viewChildren: QueryList < ChildDirective >

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

How would you select a css class in any ancestor of the component host element, all the way up to the document root?

A
  • Using the :host-context() pseudo-class selector
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

What selector force a style down through the child component tree into all the child component views?

A

Use the ::ng-deep selector along with :host pseudo-class selector

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

What does :host-context() pseudo-class selector target?

A

The :host-context() selector looks for a CSS class in any ancestor of the component host element, up to the document root

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

What does the following css do? :host-context(.theme-light) h2 { background-color: red; }

A
  • Will change this component’s background-color to red if the context of the host has the .theme-light class applied
How well did you know this?
1
Not at all
2
3
4
5
Perfectly