Outline
- Fundamentals of Angular Directives - What is Modularity?
- Fundamentals of Angular Directives - Three Types of Directives in Angular
-
Fundamentals of Angular Directives - Attribute Directives
- Introduction
- Attribute Directives API
- ElementRef Exercise
- ElementRef Exercise Solution
- Renderer2 Exercise
- Renderer2 Exercise Solution
- Building our First Attribute Directive
- Building Actions Attribute Directive Exercise
- Actions Attribute Directive Exercise Solution
- Host Decorators
- HostBinding Exercise
- HostBinding Exercise Solution
- HostListener Exercise
- HostListener Exercise Solution
- Directive Inputs
- Directive Inputs Exercise
- Directive Inputs Exercise Solution
- Input, HostBinding and HostListener Exercise
- Input, HostBinding, and HostListener Exercise Solution
- BONUS: Mos Eisley Cantina Exercise
- Mos Eisley Cantina Exercise Solution
-
Fundamentals of Angular Directives - Structural Directives
- Introduction
- Built-in Structural Directives
- NgIf Built-in Structural Directive
- NgIf Structural Directive Exercise
- NgIf Exercise Solution
- NgFor Built-in Structural Directive
- NgFor Structural Directive Exericse
- NgFor Exercise Solution
- NgSwitch Built-in Structural Directive
- NgSwitch Structural Directive Exercise
- NgSwitch Exercise Solution
- NgSwitch with Enum
- NgSwitch with Enum Exercise
- NgSwitch with Enum Exercise Solution
- Structural Directives API
- FadeOut Structural Directive
- IfAndHide Structural Directive Exercise
- IfAndHide Directive Exercise Solution
-
Fundamentals of Angular Directives - Component Directives
- Introduction
- Component Templates
- Component Property Binding Exercise
- Component Property Binding Exercise Solution
- Component Event Binding Exercise
- Component Event Binding Exercise Solution
- Component Bindings
- Component Directive Exercise
- Component Directive Exercise Solution
- Component Output Binding Exercise
- Component Output Binding Exercise Solution
- Container and Presenter Component Design
- Modular Component Design Exercise
- Modular Component Design Exercise Solution
- Thank You
Outline
- Fundamentals of Angular Directives - What is Modularity?
- Fundamentals of Angular Directives - Three Types of Directives in Angular
-
Fundamentals of Angular Directives - Attribute Directives
- Introduction
- Attribute Directives API
- ElementRef Exercise
- ElementRef Exercise Solution
- Renderer2 Exercise
- Renderer2 Exercise Solution
- Building our First Attribute Directive
- Building Actions Attribute Directive Exercise
- Actions Attribute Directive Exercise Solution
- Host Decorators
- HostBinding Exercise
- HostBinding Exercise Solution
- HostListener Exercise
- HostListener Exercise Solution
- Directive Inputs
- Directive Inputs Exercise
- Directive Inputs Exercise Solution
- Input, HostBinding and HostListener Exercise
- Input, HostBinding, and HostListener Exercise Solution
- BONUS: Mos Eisley Cantina Exercise
- Mos Eisley Cantina Exercise Solution
-
Fundamentals of Angular Directives - Structural Directives
- Introduction
- Built-in Structural Directives
- NgIf Built-in Structural Directive
- NgIf Structural Directive Exercise
- NgIf Exercise Solution
- NgFor Built-in Structural Directive
- NgFor Structural Directive Exericse
- NgFor Exercise Solution
- NgSwitch Built-in Structural Directive
- NgSwitch Structural Directive Exercise
- NgSwitch Exercise Solution
- NgSwitch with Enum
- NgSwitch with Enum Exercise
- NgSwitch with Enum Exercise Solution
- Structural Directives API
- FadeOut Structural Directive
- IfAndHide Structural Directive Exercise
- IfAndHide Directive Exercise Solution
-
Fundamentals of Angular Directives - Component Directives
- Introduction
- Component Templates
- Component Property Binding Exercise
- Component Property Binding Exercise Solution
- Component Event Binding Exercise
- Component Event Binding Exercise Solution
- Component Bindings
- Component Directive Exercise
- Component Directive Exercise Solution
- Component Output Binding Exercise
- Component Output Binding Exercise Solution
- Container and Presenter Component Design
- Modular Component Design Exercise
- Modular Component Design Exercise Solution
- Thank You
Exercise Goals
Output facts about Chuck Norris rendering the html
value as the innerHTML
of an element.
Tasks
- Open the app.component.html template file and create a new
<p>
element. - Iterate over the
facts
property that are defined in theAppComponent
class using theNgFor
structural directive, binding theinnerHTML
propert of the paragraph element to thehtml
property of eachfact
.
Exercise
Notes
- The array of
Fact
objects are defined in theAppComponent
class. EachFact
object has a singlehtml
property that is required by theFact
interface. - Use the square-bracket notation to bind the value of the
innerHTML
property on each<p>
element to the expression, which is thehtml
property on eachfact
template input variable that is unique within each iteration of theNgFor
directive.