1. Chengyu Sun California State University, Los Angeles
CS5220 Advanced Topics in Web Programming Angular – Components and Directives
Chengyu Sun
California State University, Los Angeles

2. index.html The "single page" in SPA
The page that hosts all the components such as <app-root>

3. Component
User-defined tags as opposed to standard HTML tags like <button>
Appearance: HTML and CSS
Behavior: TypeScript
Web Components are supported at the browser level

4. @Component selector: name of the tag templateUrl or template
styleUrls or styles
More options

5. NgModule: The Angular Module System …
The one-file-per-module approach of CommonJS/ES6 is limiting
file
file
file
file
file
file
file
file

6. … NgModule: The Angular Module System
A NgModule group multiple files (i.e. components, services, and so on) into one module
file
file
file
file
file
file
file
file
NgModule
NgModule

7. @NgModule …
Each module must export a class that is decorated
declarations: components/directives/pipes that belong to this module
imports: modules which this module depends on

8.
exports: components/directives/pipes that can be used by other modules
providers: injectable objects (usually services) provided by this module
bootstrap: the component(s) to load when this module is used to bootstrap (i.e. to start) an application

9. Bootstrap An Application
maint.ts :
bootstrapModule(AppModule)
app.module.ts :
bootstrap: [AppComponent]
app.component.html :
Other components

10. About NgModule
declarations and exports deal with components/directives/pipes, i.e. things used in templates
While components/directives/pipes can be "private", services are always "public"
imports deals with modules
imports vs import

11. Example: Guest Book (Single Page)
My Guest Book
Add Comment
John says:
Hello!
4/29/2018
Jane says:
Your website looks nice.
4/11/2018
Joe says:
Nice to meet you.
3/5/2018

12. Create A New Component guest-book
ng generate component <name>
Generated files
Naming conventions for components
Tags and files
Classes and methods

13. GuestBook – Data Data model class
ngOnInit() is one of the component lifecycle hooks called after the component is constructed
Code suggestion and auto import in Visual Studio Code

14. GuestBook – Display
Properties of a component class can be accessed directly in the component template
Interpolation: {{}}
Directive: ngFor
Pipe: date

15. Directive
Encapsulated DOM-related logic that can be used to compose user interface
Types of directives
Component (i.e. directive with a view)
Structural directive, e.g. ngIf, ngFor, ngSwitch
Attribute directive, e.g. ngStyle and ngClass

16. ngFor Variable can have any name
<div *ngFor="let entry of entries">
{{entry.name}}
</div>
Property
<div *ngFor="let entry of entries; let index = index">
{{index}}. {{entry.name}}
</div>
Variable
Variable can have any name
Properties: index, first, last, even, odd

17. ngIf <p *ngIf="entries.length == 0"> No entries yet. </p>
<p *ngIf="entries.length == 0; else hasEntries">
No entries yet.
</p>
<ng-template #hasEntries>
<p>There are some entries.</p>
</ng-template>
Name of a
element

18. ngSwitch <div [ngSwitch]="day">
<span *ngSwitchCase="1">Monday</span>
<span *ngSwitchCase="2">Tuesday</span>
<span *ngSwitchCase="3">Wednesday</span>
<span *ngSwitchCase="4">Thursday</span>
<span *ngSwitchCase="5">Friday</span>
<span *ngSwitchDefault>Weekend</span>
</div>

19. ngStyle
An object
<p [ngStyle]="{color: 'red', background: 'yellow'}">
Some text
</p>
<p [style.color]="'blue'">hello</p>
A string

20. ngClass CSS classes: .red { color: red; }
.yellow { background: yellow; }
<p [ngClass]="'red'">Some text</p>
<p [ngClass]="['yellow', 'red']">Some text</p>
<p [ngClass]="{yellow: true, red: false}">Some text</p>

21. Pipes
Chain-able formatting operators that can be applied to expressions
{{entry.date | date:'M/d/yyy'}}
{{ | number:'1.2-2' | currency:'USD'}}

22. The Component Hierarchy
AppComponent

23. Example
App
Component
GuestBook
Component
AddEntry
Component

24. Pass Data from Parent to Child
guest-book.component.ts:
@Input() entries: GuestBookEntry[];
app.component.html:
<app-guest-book [entries]="entries">
An input property in the child component
A property in the current component

25. AddEntryComponent Template
A variable in the view representing
the current element
Name: <input type="text" #name> <br>
Message: <input type="text" #message> <br>
<button (click)="addEntry(name, message)">Add</button>
Event
Event handler in the component

26. AddEntryComponent Code
Angular is still JavaScript
DOM events like click
DOM elements like HTMLInputElement
Event handler
return false to stop event propagation

27. Pass Data from Child to Parent …
add-entry.component.ts:
@Output() entryAdded: EventEmitter<GuestBookEntry>
= new EventEmitter<GuestBookEntry>();
this.entryAdded.emit(
new GuestBookEntry(name.value, message.value));

28. … Pass Data from Child to Parent
app.component.html:
<app-add-entry (entryAdded)="addEntry($event)">
app.component.ts:
addEntry(entry: GuestBookEntry): void {
this.entries.push(entry); }

29. To Component Or Not To Component
Putting everything inside one component seems to make coding easier (i.e. no need to pass data between components), so when is it better to create more components??