Presentation is loading. Please wait.

Presentation is loading. Please wait.

The building blocks of Angular

Similar presentations


Presentation on theme: "The building blocks of Angular"— Presentation transcript:

1 The building blocks of Angular
Components & Markup The building blocks of Angular Angular Development SoftUni Team Technical Trainers Software University

2 Table of Contents The idea behind components Creating components
Templates Simple data binding Lifecycle hooks Component interaction

3 Have a Question? sli.do #angular-js

4 The Idea Behind Components
The main building block

5 The Idea Behind Components
A component controls part of the screen (the view) For example: The navigation bar The application root Car listings Car details page Car editor etc.

6 The Idea Behind Components
You define the application's logic into the component The component class interacts with the view via Properties – to set data Methods – to execute logic Angular creates, updates and destroys components as the user moves through the application Each component has a HTML template attached to it

7 Creating Components Give me some code!

8 The Idea Behind Components
In order to create a component, you need to add a class and decorate it with the Component decorator Additionally, you need to add it to the declarations property of the current module import { Component } from @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css']}) export class AppComponent { title = 'app'; }

9 The Idea Behind Components
The component metadata selector – the component's HTML selector template or templateUrl – the component's template styles or styleUrls – unique styles for the current component providers – list of providers that can be injected into the component animations – list of animations for this component. More info:

10 Templates & Data Bindings
Enhanced HTML

11 Templates & Data Bindings
A template is a form of HTML that tells Angular how to render the component They can be both inline or in a separate file <h2>Hero List</h2> <p><i>Pick a hero from the list</i></p> <ul> <li *ngFor="let hero of heroes" (click)="selectHero(hero)"> {{hero.name}} </li> </ul> <hero-detail *ngIf="selectedHero" [hero]="selectedHero"></hero-detail>

12 Templates & Data Bindings
You can render values into the template import { Component } from @Component({ selector: 'my-app', template: ` <h1>{{title}}</h1> <h2>My favorite hero is: {{myHero}}</h2> ` }) export class AppComponent { title = 'Tour of Heroes'; myHero = 'Windstorm'; }

13 Templates & Data Bindings
You can render array properties with *ngFor import { Component } from @Component({ selector: 'my-app', template: `<h2>My favorite hero is: {{myHero}}</h2> <p>Heroes:</p> <ul> <li *ngFor="let hero of heroes"> {{ hero }} </li> </ul>` }) export class AppComponent { heroes = ['Windstorm', 'Bombasto', 'Magneta', 'Tornado']; myHero = this.heroes[0]; }

14 Templates & Data Bindings
You can render nested properties import { Component } from class Hero { constructor( public id: number, public name: string) { } } @Component({ selector: 'my-app', template: `<h2>My favorite hero is: {{myHero.name}}</h2>` }) export class AppComponent { myHero = new Hero(1, 'Windstorm');

15 Templates & Data Bindings
You can render conditional elements import { Component } from @Component({ selector: 'my-app', template: `<p *ngIf="heroes.length > 3">There are many heroes!</p>` }) export class AppComponent { heroes = ['Windstorm', 'Bombasto', 'Magneta', 'Tornado']; }

16 Templates & Data Bindings
You can attach events import { Component } from @Component({ selector: 'my-app', template: `<p (click)="hideMessage($event)">There are many heroes!</p>` }) export class AppComponent { hideMessage($event) { // do some glorious stuff }

17 Templates & Data Bindings
The text between the curly brackets is evaluated to a string Template expressions are not pure JavaScript You cannot use these Assignments (=, +=, -=, ...) The new operator Multiple expressions Increment or decrement operations (++ or --) Bitwise operators <!-- "The sum of is not 4" --> <p>The sum of is not {{ getVal()}}</p>

18 Templates & Data Bindings
There are three types of data binding From data-source to view From view to data-source Two-way {{expression}} [target]="expression" bind-target="expression" (target)="statement" on-target="statement" [(target)]="expression" bindon-target="expression"

19 Templates & Data Bindings
Binding attributes <table border=1> <!-- expression calculates colspan=2 --> <tr><td [attr.colspan]="1 + 1">One-Two</td></tr> <!-- ERROR: There is no `colspan` property to set! <tr><td colspan="{{1 + 1}}">Three-Four</td></tr> --> <tr><td>Five</td><td>Six</td></tr> </table>

20 Templates & Data Bindings
Binding classes You can bind to a specific class name <div [class]="badCurly">Bad curly</div> <!-- toggle the "special" class on/off with a property --> <div [class.special]="isSpecial">The class binding is special</div> <!-- binding to `class.special` trumps the class attribute --> <div class="special" [class.special]="!isSpecial">This one is not so special</div>

21 Templates & Data Bindings
Binding styles Or styles with units <button [style.color]="isSpecial ? 'red': 'green'">Red</button> <button [style.background-color]="canSave ? 'cyan': 'grey'" >Save</button> <button [style.font-size.em]="isSpecial ? 3 : 1" >Big</button> <button [style.font-size.%]="!isSpecial ? 150 : 50" >Small</button>

22 Templates & Data Bindings
You can reference other elements You can also use the ref- prefix <input #phone placeholder="phone number"> <!-- lots of other elements --> <!-- phone refers to the input; pass its `value` to an event handler --> <button (click)="callPhone(phone.value)">Call</button> <input ref-fax placeholder="fax number"> <button (click)="callFax(fax.value)">Fax</button>

23 Templates & Data Bindings
You can add pipes You can also use the null-safe operator <div>Title through uppercase pipe: {{title | uppercase}}</div> <div>Birthdate: {{currentHero.birthdate | date:'longDate'}}</div> <div>{{currentHero | json}}</div> <div>Title through a pipe chain:{{title | uppercase | lowercase}}</div> <div>The current hero's name is {{currentHero?.name}}</div> // equivalent expression <div>The null hero's name is {{nullHero && nullHero.name}}</div> // or remove the whole div <div *ngIf="nullHero">The null hero's name is {{nullHero.name}}</div>

24 Intersect through the loop
Lifecycle Hooks Intersect through the loop

25 Lifecycle Hooks Angular components support lifecycle hooks
import { Component, OnInit, OnDestroy } from @Component({ selector: 'peek-a-boo', template: '<div>Some Text</div>' }) export class PeekABoo implements OnInit, OnDestroy { ngOnInit() { console.log('Created'); } ngOnDestroy() { console.log('Destroyed');

26 Lifecycle Hooks All lifecycle hooks:
ngOnChanges() – when data is changed ngOnInit() – when the component is initialized ngDoCheck() – detect your own changes ngAfterContentInit() – when external content is received ngAfterContentChecked() – when external content is checked ngAfterViewInit() – when the views and child views are created ngAfterViewChecked() – when the above are checked ngOnDestroy() – when you need to cleanup

27 Component Interaction
Communication is key!

28 Component Interaction
In order to pass data from parent to child component import { Component, Input } from import { Hero } from './hero'; @Component({ selector: 'hero-child', template: ` <h3>{{hero.name}} says:</h3> <p>I, {{hero.name}}, am at your service, {{masterName}}.</p> ` }) export class HeroChildComponent { @Input() hero: Hero; @Input('master') masterName: string; }

29 Component Interaction
In order to pass data from parent to child component import { Component } from import { HEROES } from './hero'; @Component({ selector: 'hero-parent', template: ` <h2>{{master}} controls {{heroes.length}} heroes</h2> <hero-child *ngFor="let hero of heroes" [hero]="hero" [master]="master"> </hero-child>` }) export class HeroParentComponent { heroes = HEROES; master = 'Master'; }

30 Component Interaction
In order to pass data from child to parent component import { Component, EventEmitter, Input, Output } from @Component({ selector: 'my-voter', template: ` <button (click)="vote(true)" [disabled]="voted">Agree</button> <button (click)="vote(false)" [disabled]="voted">Disagree</button> ` }) export class VoterComponent { @Output() onVoted = new EventEmitter<boolean>(); voted = false; vote(agreed: boolean) { this.onVoted.emit(agreed); this.voted = true; }

31 Component Interaction
In order to pass data from child to parent component import { Component } from @Component({ selector: 'vote-taker', template: ` <h3>Agree: {{agreed}}, Disagree: {{disagreed}}</h3> <my-voter *ngFor="let voter of voters" [name]="voter" (onVoted)="onVoted($event)"> </my-voter>` }) export class VoteTakerComponent { agreed = 0; disagreed = 0; voters = ['Mr. IQ', 'Ms. Universe', 'Bombasto']; onVoted(agreed: boolean) { agreed ? this.agreed++ : this.disagreed++; }

32 JavaScript Web – Angular Fundamentals
© Software University Foundation – This work is licensed under the Creative Commons Attribution-NonCommercial-ShareAlike license.

33 License This course (slides, examples, demos, videos, homework, etc.) is licensed under the "Creative Commons Attribution- NonCommercial-ShareAlike 4.0 International" license Attribution: this work may contain portions from "End-to-end JavaScript Applications" course by Telerik Academy under CC-BY-NC-SA license © Software University Foundation – This work is licensed under the Creative Commons Attribution-NonCommercial-ShareAlike license.

34 Free Trainings @ Software University
Software University Foundation – softuni.org Software University – High-Quality Education, Profession and Job for Software Developers softuni.bg Software Facebook facebook.com/SoftwareUniversity Software YouTube youtube.com/SoftwareUniversity Software University Forums – forum.softuni.bg © Software University Foundation – This work is licensed under the Creative Commons Attribution-NonCommercial-ShareAlike license.


Download ppt "The building blocks of Angular"

Similar presentations


Ads by Google