@@ -202,3 +202,41 @@ A: Can provide a final wildcard path like so: { path: ‘**’, component: PageN
202202
203203A: ` <a [routerLink]="[’product.id’]">{{product.id}}</a> `
204204
205+ ## Styling Questions:
206+ 207+ ** How would you select a custom component to style it?**
208+ 209+ A: TODO
210+ 211+ ** How do you reference the host of a component?**
212+ 213+ A: let DI inject an ElementRef into the constructor of your component.
214+ 215+ ** What pseudo-class selector targets styles in the element that hosts the component?**
216+ 217+ A: The : host pseudo class selector.
218+ 219+ ** How would you select all the child components' elements?**
220+ 221+ A: with the @ViewChildren decorator, like for example:
222+ 223+ ` @ViewChildren(ChildDirective) viewChildren: QueryList<ChildDirective>; `
224+ 225+ ** How would you select a css class in any ancestor of the component host element, all the way up to the document root?**
226+ 227+ A: using the : host-context () pseudo-class selector.
228+ 229+ ** What selector force a style down through the child component tree into all the child component views?**
230+ 231+ A: use the /deep/ selector along with : host pseudo-class selector.
232+ 233+ ** What does : host-context () pseudo-class selector target?**
234+ 235+ A: TODO
236+ 237+ ** What does the following css do?**
238+ `: host-context (.theme-light) h2 {
239+ background-color: red;
240+ }`
241+ 242+ A: Will change this component’s background-color to red if the context of the host has the .theme-light class applied.
0 commit comments