Muestra las diferencias entre dos versiones de la página.
| Próxima revisión | Revisión previa | ||
|
wiki2:angular:concrete [2016/07/17 07:57] alfred creado |
wiki2:angular:concrete [2020/05/09 09:25] (actual) |
||
|---|---|---|---|
| Línea 1: | Línea 1: | ||
| ====== Angular concrete ====== | ====== Angular concrete ====== | ||
| + | ===== Components ===== | ||
| + | |||
| + | ==== Lifecycle hooks ==== | ||
| + | <code javascript> | ||
| + | import { OnInit } from '@angular/core'; | ||
| + | |||
| + | export class AppComponent implements OnInit { | ||
| + | ngOnInit() { | ||
| + | } | ||
| + | } | ||
| + | </code> | ||
| + | |||
| + | ==== Call method of a nested component ==== | ||
| + | <code html> | ||
| + | <nk-activities #nkActivities></nk-activities> | ||
| + | <a style="cursor:pointer;" (click)="nkActivities.createActivity(0, 'Talk')">Dialogue</a> | ||
| + | </code> | ||
| ===== Templates ===== | ===== Templates ===== | ||
| ==== Access to HTML tags ==== | ==== Access to HTML tags ==== | ||
| Línea 5: | Línea 22: | ||
| <input #newHeroName /> | <input #newHeroName /> | ||
| <button (click)="addHero(newHeroName.value); newHeroName.value=''"> | <button (click)="addHero(newHeroName.value); newHeroName.value=''"> | ||
| - | </html> | + | </code> |
| + | |||
| + | ==== Access to a form ==== | ||
| + | <code html> | ||
| + | <form (ngSubmit)="onSubmit()" #missionForm="ngForm"> | ||
| + | <input type="text" class="form-control" required [ngModel]="mission.name" name="name"> | ||
| + | <button type="button" class="btn btn-default" (click)="updateMission(missionForm.form.controls)"><span class="glyphicon glyphicon-open" aria-hidden="true"></span> Update Name</button> | ||
| + | |||
| + | </code> | ||
| + | |||
| + | ==== ngFor with index ==== | ||
| + | <code html> | ||
| + | <ul> | ||
| + | <li *ngFor="let item of items; let i = index"> | ||
| + | {{i}} {{item}} | ||
| + | </li> | ||
| + | </ul> | ||
| + | </code> | ||
| + | |||
| + | ==== Combining ngFor and ngIf ==== | ||
| + | <code> | ||
| + | <select class="form-control" [(ngModel)]="value" (change)="valueChanged.emit($event.target.value)" name="content"> | ||
| + | <template ngFor let-f [ngForOf]="files"> | ||
| + | <option [value]="f.id">{{f.name}}</option> | ||
| + | </template> | ||
| + | </select> | ||
| + | </code> | ||
| + | ===== Others ===== | ||
| + | |||
| + | ==== String values ==== | ||
| + | <code javascript> | ||
| + | let url = `${this.heroesUrl}/${hero.id}`; | ||
| + | </code> | ||