Have not clear place can add QQ group: 142681686. Won’t 24 hours a day all day question and answer (still have a job after all), but when you encounter a problem have no place to find the answer of time, come here to ask once, dead horse be live horse cure in case I saw just also know the answer? Also do not waste you what is not!!

preface

In this section, we will compare angular directives with VUE directives to help you master the use of Angular directives

The body of the

Conditional rendering: ngIf

Angular controls the display of an element with the *ngIf directive, such as:

<p *ngIf="seen"> Now you see me </p>Copy the code
import { Component } from '@angular/core';

@Component({
  selector: 'app-welcome',
  templateUrl: './welcome.html',
  styleUrls: ['./welcome.css'],
})
export class WelcomeComponent {
  public seen = true;
}

Copy the code

How do angular display another template with else?

<p *ngIf="seen; Else elseBlock"> Now true </p>< ng-template #elseBlock><p> Now false </p></ng-template>Copy the code

The ng-template tag, like the template tag in VUE, is used to define the template and does not generate anything during rendering.

How do angular implement multiple choices like VUE?

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>
Copy the code

I recommend that you now use the following structure:

<div *ngIf="type === 'A'"> A </div> <div *ngIf="type === 'B'"> B </div> <div *ngIf="type === 'C'"> C </div> <div *ngIf="type ! == 'A' && type ! == 'B' && type ! == 'C'"> Not A/B/C </div>Copy the code

It doesn’t look very elegant, does it? But it does satisfy our needs, doesn’t it? We’ll cover other programmatic ways to control the display of elements in the future, but for starters, this is the best way to understand it.

After previous modifications, our welcome component now looks like this: welcome.html

<h2 (click)="clickHandler($event)"> {{name}}! </h2> <div *ngIf="active === 1"> A </div> <div *ngIf="active === 2"> B </div> <div *ngIf="active === 3"> C </div> <div *ngIf="active ! == 1 && active ! == 2 && active ! == 3"> Not A/B/C </div>Copy the code

welcome.ts

import { Component } from '@angular/core'; @Component({ selector: 'app-welcome', templateUrl: './welcome.html', styleUrls: ['./welcome.css'], }) export class WelcomeComponent { public name = 'Angular'; private active = 1; clickHandler() { this.active++; }}Copy the code

Loop render: ngFor

Loop rendering in Angular is very similar to vue, which looks like this:

<div id="app-4"> <ol> <li v-for="(todo, index) in todos"> {{ todo.text }} {{ index }} </li> </ol> </div> var app4 = new Vue({ el: '#app-4', data: { todos: [{text: 'learning JavaScript'}, {text: 'learning Vue'}, {text: 'the whole cow projects'}]}})Copy the code

What about angular? welcome.html

<h2 (click)="clickHandler($event)"> {{name}}! </h2> <div *ngIf="active === 1"> A </div> <div *ngIf="active === 2"> B </div> <div *ngIf="active === 3"> C </div> <div *ngIf="active ! == 1 && active ! == 2 && active ! == 3"> Not A/B/C </div> <ol> <li *ngFor="let todo of todos; let i = index"> {{ todo.text }} {{ i }} </li> </ol>Copy the code

welcome.ts

import { Component } from '@angular/core'; @Component({ selector: 'app-welcome', templateUrl: './welcome.html', styleUrls: ['./welcome.css'], }) export class WelcomeComponent { public name = 'Angular'; private active = 1; Public todos = [{text: 'learn JavaScript'}, {text:' learn Vue'}, {text: 'whole project'}]; clickHandler() { this.active++; }}Copy the code

If you know VUE, you know Angular!!

The last

Do you feel more confident about learning Angular? Yes, Angular is not as hard as it sounds online; It’s not Angular that’s hard, it’s your decision to learn Angular’s heart.