VietTuts

Tự Học Lập Trình Online

  • Home
  • Java
  • Servlet
  • JSP
  • Struts2
  • Hibernate
  • Spring
  • MyBatis
  • Java WS
  • C
  • C++
  • C#
  • Python
  • PHP
  • Excel
  • VBA
  • Web
    • JavaScript
    • JQUERY
    • JSON
    • AJAX
    • CSS
    • HTML
    • HTML5
    • Node.js
    • Angular 7
  • SQL
    • MySQL
    • SQL Server
  • Misc
    • Eclipse
    • Phần mềm tiện ích
    • Cấu trúc DL&GT
    • Selenium Test

Học Node.js

Giới thiệu Angular Cài đặt môi trường Angular7 Tạo dự án đầu tiên trong Angular7 Hướng dẫn lập trình Angular7 với trình soạn thảo Visual Studio Code Angular7 - Components Angular7 - Modules Angular7 - Data Binding Angular7 - Event Binding Angular7 - Templates Angular7 - Directives Angular7 - Pipes Angular7 - Routing Angular7 - Services Angular7 - Http Client Angular7 - CLI Prompts Angular7 - Forms
1 / 3
❮ ❯

Template trong Angular 7


Event Binding trong Angular 7
Directive trong Angular 7

Nội dung chính

  • Giới thiệu mẫu (Template) trong Angular
  • Sử dụng Template với điều kiện if else

Giới thiệu mẫu (Template) trong Angular

Angular 7 sử dụng <ng-template> làm thẻ thay vì <template> được sử dụng trong Angular2. <ng-template> đã được sử dụng kể từ khi phát hành Angular 4 và phiên bản trước đó tức là Angular 2 sử dụng <template> cho cùng một mục đích. Lý do nó bắt đầu sử dụng <ng-template> thay vì <template> từ Angular 4 trở đi là do có xung đột tên giữa thẻ <template> và thẻ chuẩn html <template>. Nó không được chấp nhận khi tiếp tục sử dụng. Đây là một trong những thay đổi lớn trong phiên bản Angular 4.


Sử dụng Template với điều kiện if else

Bây giờ chúng ta hãy sử dụng Template cùng với điều kiện if else.

app.component.html


<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
</div>

<div> Months : 
  <select (change) = "changemonths($event)"> 
    <option *ngFor = "let i of months">{{i}}</option> 
  </select> 
</div> 
<br/>

<span *ngIf="showAge; then condition1 else condition2"> Age = 18 </span>
<ng-template #condition1>Show Age from template.</ng-template>
<ng-template #condition2>Hide Age from template.</ng-template>
<br/>

<button (click) = "myClickFunction($event)"> Click Me </button>

<router-outlet></router-outlet>

Đối với thẻ Span, chúng tôi đã bổ sung thêm nếu showAge = true thì template của condition1 được gọi, ngược lại template của condition2 được gọi.

Các mẫu sẽ được gọi như sau:


<ng-template #condition1>Show Age from template.</ng-template>
<ng-template #condition2>Hide Age from template.</ng-template>

app.component.ts


import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Angular 7';

  // khai bao mang cac thang.
  months = ["January", "February", "March", "April", "May", "June", "July", 
      "August", "September", "October", "November", "December"];

  showAge = false;

  myClickFunction(event) {
    this.showAge = !this.showAge;
  }

  changemonths(event) {
    alert('Change dropdown.');
  }
}

Kết quả:

Template trong Angular 7

Biến showAge có giá trị ban đầu false vì vậy mẫu condition2 được in ra. Nếu bạn click vào button "Click Me", biến showAge bị đảo ngược giá trị, do vậy mẫu tương ứng sẽ được gọi.

Hàm đảo ngược giá trị showAge:


  myClickFunction(event) {
    this.showAge = !this.showAge;
  }

Kết quả:

Click button:

Template trong Angular 7

Click button:

Template trong Angular 7
Event Binding trong Angular 7
Directive trong Angular 7

Recent Updates

HttpClient trong Angular 7Service trong Angular7Routing trong Angular 7Pipe trong Angular 7Directive trong Angular 7Template trong Angular 7Event Binding trong Angular 7Module trong Angular 7Data Binding trong Angular 7Component trong Angular 7Hướng dẫn lập trình Angular 7 với trình soạn thảo Visual Studio CodeTạo dự án Angular đầu tiênSắp Tết 2026 Rồi! - Còn bao nhiêu ngày nữa là đến tết 2026?

VietTuts on facebook

Học Lập Trình Online Miễn Phí - VietTuts.Vn
Danh Sách Bài Học

Học Java | Hibernate | Spring
Học Excel | Excel VBA
Học Servlet | JSP | Struts2
Học C | C++ | C#
Học Python
Học SQL

Bài Tập Có Lời Giải

Bài tập Java
Bài tập C
Bài tập C++
Bài tập C#
Bài tập Python
Ví dụ Excel VBA

Câu Hỏi Phỏng Vấn

201 câu hỏi phỏng vấn java
25 câu hỏi phỏng vấn servlet
75 câu hỏi phỏng vấn jsp
52 câu hỏi phỏng vấn Hibernate
70 câu hỏi phỏng vấn Spring
57 câu hỏi phỏng vấn SQL

Scroll back to top

Copyright © 2016 VietTuts.Vn all rights reserved. | Liên hệ | Chính sách - riêng tư | sitemap.html | sitemap_index.xml