New 2

Question 1

embedded styles takes precedence over any CSS styles except . . .

Answer 1

styles that are marked with !important

Question 2

a methodology for systematically organizing our styles

Answer 2

SMACSS

Question 3

allows us to ship our components knowing that the styles of the component will (most likely) not be overridden by other styles in target applications

Answer 3

style isolation

Question 4

each component will have a unique host property attached. . . when?

Answer 4

upon application startup (or at build-time with AOT)

Question 5

how Angular provides the isolated styles

Answer 5

will then inject the styles directly into the page header as a style tag

Question 6

how can you style the host of the component you’re in?

Answer 6

the special :host pseudo-class selector

Question 7

if we want our component styles to cascade to all child elements of a component, but not to any other element on the page

Answer 7

:host /deep/ h2 {
color: red;
}

Question 8

allow a component to apply a style to elements outside of it

Answer 8

the :host-context selector

(one use case - theme classes)

  :host-context(.red-theme) .btn-theme {
    background: red;
  }
  :host-context(.blue-theme) .btn-theme {
      background: blue;
  }

Question 9

CSS variable in Sass

Answer 9

$border-color: red;

Question 10

Sass lets you make a reference to the parent style . . .

Answer 10

using the & syntax

Question 11

sometimes we want global styles, that are applied to all elements of a page

Answer 11

we can add those to our angular-cli.json config

Question 12

pattern for separation of components into . . .

Answer 12

Container Components vs Presentational Components

Question 13

Container Components

Answer 13

These components know how to retrieve data from the service layer. Note that the top-level component of a route is usually a Container Component

Question 14

Presentational Components

Answer 14

These components simply take data as input and know how to display it on the screen. They also can emit custom events

Question 15

one way to prevent multiple requests to the backend on an observable

Answer 15

using publishLast().refCount()

Question 16

with a large component tree, try to avoid

Answer 16

custom event bubbling

Question 17

The use of the async pipe will ensure . . .

Answer 17

. . . that the component will be re-rendered when a new version of the first name is emitted (for example when the user logs in), even if the component has no inputs

Question 18

the async pipe will detect that a new value was emitted by the observable and so it . . .

Answer 18

will then mark the component for re-rendering