Update video with thumbnail to all articles

angular-vietnam · Aug 2, 2022 · 13339c1 · 13339c1
1 parent 162ec38
commit 13339c1
Show file tree

Hide file tree

Showing 37 changed files with 847 additions and 676 deletions.
diff --git a/Day001-Installation.md b/Day001-Installation.md
@@ -74,7 +74,7 @@ Lúc này các bạn sẽ cần trả lời 1 số câu hỏi về routing, styl
 
 ## Youtube Video
 
-https://youtu.be/NS6P1fpU77o
+[![Day 01](https://img.youtube.com/vi/NS6P1fpU77o/0.jpg)](https://youtu.be/NS6P1fpU77o)
 
 ## HASHTAG
 

diff --git a/Day002-AngularApp.md b/Day002-AngularApp.md
@@ -27,9 +27,9 @@ export class HelloComponent {}
 Nó là một TS class rất đơn giản phải không, bây giờ chúng ta sẽ gắn meta-data cho nó như sau.
 
 ```typescript
-import { Component } from "@angular/core";
+import { Component } from '@angular/core';
 @Component({
-  selector: "app-hello",
+  selector: 'app-hello',
   template: ` <h2>Hello there!</h2> `,
 })
 export class HelloComponent {}
@@ -59,8 +59,9 @@ error NG8001: 'app-hello' is not a known element:
    Declarables must belong to exactly one module. The compiler emits an error if you try to declare the same class in more than one module. Be careful not to declare a class that is imported from another module.
 
    Yeah, chính là nó đó, giờ chỉ việc import component lên đầu và thêm HelloComponent vào declarations là xong.
+
 ```typescript
-import { HelloComponent } from './hello.component'
+import { HelloComponent } from './hello.component';
 ```
 
 ```typescript
@@ -80,7 +81,7 @@ Các bạn hãy thử tìm hiểu cấu trúc ứng dụng và tạo thêm nhi
 
 ## Youtube Video
 
-https://youtu.be/jgFw8tAgKNs
+[![Day 02](https://img.youtube.com/vi/jgFw8tAgKNs/0.jpg)](https://youtu.be/jgFw8tAgKNs)
 
 ## Link tham khảo
 
@@ -89,7 +90,7 @@ Link document các bạn cần tìm hiểu trong Day 2
 - https://angular.io/guide/architecture
 - https://angular.io/guide/architecture-modules
 - https://angular.io/guide/architecture-components
- 
+
 Mục tiêu Day 3 sẽ là về **data binding**.
 
 ## Author

diff --git a/Day003-DataBinding.md b/Day003-DataBinding.md
@@ -11,9 +11,9 @@ Nó có thể hiểu là hãy tính toán cái expression này, nếu có trả
 Chỉ đơn giản thế. Giờ các bạn có thể phun data về tên tuổi của một người thành cái profile đơn giản như sau:
 
 ```typescript
-import { Component } from "@angular/core";
+import { Component } from '@angular/core';
 @Component({
-  selector: "app-hello",
+  selector: 'app-hello',
   template: `
     <h2>Hello there!</h2>
     <h3>Your name: {{ user.name }}</h3>
@@ -22,7 +22,7 @@ import { Component } from "@angular/core";
 })
 export class HelloComponent {
   user = {
-    name: "Tiep Phan",
+    name: 'Tiep Phan',
     age: 30,
   };
 }
@@ -37,11 +37,11 @@ Sau khi parse xong sẽ có một object (node) thuộc type HTMLInputElement đ
 
 ```typescript
 obj = {
-    type: 'text',
-    value: 'something',
-    attributes: [] // thuộc type NamedNodeMap, dạng như một array
-    // … các thuộc tính, method khác
-}
+  type: 'text',
+  value: 'something',
+  attributes: [], // thuộc type NamedNodeMap, dạng như một array
+  // … các thuộc tính, method khác
+};
 ```
 
 Như bạn có thể thấy, attribute được dùng để chỉ những gì các bạn đặt vào phần opening tag của một tag, còn lại là property của object (node).
@@ -67,15 +67,15 @@ Câu trả lời chính là Event binding. Để gắn event listener vào một
 
 ```typescript
 @Component({
-  selector: "app-hello",
+  selector: 'app-hello',
   template: `
     <h2>Hello there!</h2>
     <button (click)="showInfo()">Click me!</button>
   `,
 })
 export class HelloComponent {
   showInfo() {
-    alert("Inside Angular Component method");
+    alert('Inside Angular Component method');
   }
 }
 ```
@@ -119,13 +119,12 @@ Mục tiêu Day 4 sẽ là về cấu trúc `if else`
 
 ## Youtube Video
 
-https://youtu.be/WrMywdbnQfk
+[![Day 03](https://img.youtube.com/vi/WrMywdbnQfk/0.jpg)](https://youtu.be/WrMywdbnQfk)
 
 ## Author
 
 [Tiep Phan](https://github.com/tieppt)
 
-
 ## HASHTAG
 
 `#100DaysOfCodeAngular` `#100DaysOfCode` `#AngularVietNam100DoC_Day3`
diff --git a/Day004-Structure-Directive-If-Else.md b/Day004-Structure-Directive-If-Else.md
@@ -9,19 +9,17 @@ Trong Angular để thêm, xóa, thay đổi structure (structure HTML chẳng h
 
 ```typescript
 @Component({
-  selector: "app-hello",
+  selector: 'app-hello',
   template: `
     <h2>Hello there!</h2>
     <h3>Your name: {{ user.name }}</h3>
     <p>Your name: {{ user.age }}</p>
-    <div *ngIf="user.age >= 13">
-      Bạn có thể xem nội dung PG-13
-    </div>
+    <div *ngIf="user.age >= 13">Bạn có thể xem nội dung PG-13</div>
   `,
 })
 export class HelloComponent {
   user = {
-    name: "Tiep Phan",
+    name: 'Tiep Phan',
     age: 30,
   };
 }
@@ -32,24 +30,16 @@ Với những directive được cung cấp sẵn (built-in) bởi Angular, gi
 Vậy nếu chúng ta muốn dùng IF-ELSE thì thế nào. Có thể các bạn sẽ nghĩ ngay đến phủ định mệnh đề IF là được ELSE thôi. Điều này hoàn toàn được.
 
 ```html
-<div *ngIf="user.age >= 13">
-  Bạn có thể xem nội dung PG-13
-</div>
-<div *ngIf="user.age < 13">
-  Bạn không thể xem nội dung PG-13
-</div>
+<div *ngIf="user.age >= 13">Bạn có thể xem nội dung PG-13</div>
+<div *ngIf="user.age < 13">Bạn không thể xem nội dung PG-13</div>
 ```
 
 Hoặc chúng ta có cách hay ho khác, đó là dùng đến ng-template. Tag ng-template là một tag được cung cấp bởi Angular, nó sẽ lưu trữ một Template được định nghĩa bên trong cặp thẻ mở/đóng của nó. Những gì được định nghĩa bên trong đó sẽ không được hiển thị ra view, nhưng chúng ta có thể sử dụng Template đó để render bằng code. Đoạn code phía trên có thể được chuyển đổi tương đương:
 
 ```html
-<div *ngIf="user.age >= 13; else noPG13">
-  Bạn có thể xem nội dung PG-13
-</div>
+<div *ngIf="user.age >= 13; else noPG13">Bạn có thể xem nội dung PG-13</div>
 <ng-template #noPG13>
-  <div>
-    Bạn không thể xem nội dung PG-13
-  </div>
+  <div>Bạn không thể xem nội dung PG-13</div>
 </ng-template>
 ```
 
@@ -59,9 +49,7 @@ Với cú pháp sử dụng dấu `*` ở trên, có thể các bạn sẽ thấ
 
 ```html
 <ng-template [ngIf]="user.age >= 13" [ngIfElse]="noPG13">
-  <div>
-    Bạn có thể xem nội dung PG-13
-  </div>
+  <div>Bạn có thể xem nội dung PG-13</div>
 </ng-template>
 ```
 
@@ -77,7 +65,7 @@ Mục tiêu Day 5 sẽ là về cấu trúc lặp `ngForOf`
 
 ## Youtube Video
 
-https://youtu.be/Yujs6hi-l4w
+[![Day 04](https://img.youtube.com/vi/Yujs6hi-l4w/0.jpg)](https://youtu.be/Yujs6hi-l4w)
 
 ## Author
 

diff --git a/Day005-Structure-Directive-NgFor.md b/Day005-Structure-Directive-NgFor.md
@@ -9,19 +9,19 @@ Giả sử chúng ta có một danh sách các tác giả của các cuốn sác
 authors = [
   {
     id: 1,
-    firstName: "Flora",
-    lastName: "Twell",
-    email: "[email protected]",
-    gender: "Female",
-    ipAddress: "99.180.237.33",
+    firstName: 'Flora',
+    lastName: 'Twell',
+    email: '[email protected]',
+    gender: 'Female',
+    ipAddress: '99.180.237.33',
   },
   {
     id: 2,
-    firstName: "Priscella",
-    lastName: "Signe",
-    email: "[email protected]",
-    gender: "Female",
-    ipAddress: "183.243.228.65",
+    firstName: 'Priscella',
+    lastName: 'Signe',
+    email: '[email protected]',
+    gender: 'Female',
+    ipAddress: '183.243.228.65',
   },
   // more data
 ];
@@ -101,24 +101,18 @@ Ví dụ:
 
 ```html
 <div *ngFor="”let" item of list”>
-  <div *ngIf="”somethingGoood”">
-    More code
-  </div>
+  <div *ngIf="”somethingGoood”">More code</div>
 </div>
 ```
 
 Giả sử nếu bạn không được phép hoặc không muốn sinh ra một div thừa thì sao? Chúng ta có thể convert NgIf về dạng ng-template như buổi trước hoặc dùng ng-container để dùng:
 
 ```html
 <div *ngFor="”let" item of list”>
-  <ng-container *ngIf="”somethingGoood”">
-    More code
-  </ng-container>
+  <ng-container *ngIf="”somethingGoood”"> More code </ng-container>
 </div>
 <div *ngFor="”let" item of list”>
-  <ng-template [ngIf]="”somethingGoood”">
-    More code
-  </ng-template>
+  <ng-template [ngIf]="”somethingGoood”"> More code </ng-template>
 </div>
 ```
 
@@ -137,7 +131,7 @@ Mục tiêu Day 6 sẽ là về `Attribute directive` để áp dụng style, cl
 
 ## Youtube Video
 
-https://youtu.be/q7CQPEPSkD0
+[![Day 05](https://img.youtube.com/vi/q7CQPEPSkD0/0.jpg)](https://youtu.be/q7CQPEPSkD0)
 
 ## Author
 

diff --git a/Day006-Attribute-Directive-Class-Style.md b/Day006-Attribute-Directive-Class-Style.md
@@ -9,9 +9,7 @@ Trong các ứng dụng thực tế, có thể chúng ta cần thay đổi (thê
 Ví dụ, nếu chúng ta đang chọn một tab nào đó để hiển thị, thì tab đó sẽ có thêm class tab-active, các tab khác sẽ không có. Lúc này chúng ta sẽ sử dụng cú pháp:
 
 ```html
-<div [class.tab-active]="isTabActive">
-  some content
-</div>
+<div [class.tab-active]="isTabActive">some content</div>
 ```
 
 Nhìn qua thì nó chỉ là property binding, với giá trị của isTabActive trả về true thì classList của div đó sẽ tồn tại class tab-active, còn nếu trả về false thì sẽ không tồn tại.
@@ -78,7 +76,7 @@ Mục tiêu Day 7 sẽ là Input cho component.
 
 ## Youtube Video
 
-https://youtu.be/Zh36WRD3MMQ
+[![Day 06](https://img.youtube.com/vi/Zh36WRD3MMQ/0.jpg)](https://youtu.be/Zh36WRD3MMQ)
 
 ## Author
 

diff --git a/Day007-Component-Interaction-01.md b/Day007-Component-Interaction-01.md
@@ -61,10 +61,10 @@ Khi đã có component và khai báo input rồi thì làm sao để sử dụng
 Đây là component progress-bar của chúng ta.
 
 ```typescript
-import { Component, OnInit, Input } from "@angular/core";
+import { Component, OnInit, Input } from '@angular/core';
 
 @Component({
-  selector: "app-progress-bar",
+  selector: 'app-progress-bar',
   template: `
     <div
       class="progress-bar-container"
@@ -130,9 +130,9 @@ export class ProgressBarComponent implements OnInit, OnChanges {
   constructor() {}
 
   ngOnChanges(changes: SimpleChanges) {
-    if ("progress" in changes) {
-      if (typeof changes["progress"].currentValue !== "number") {
-        const progress = Number(changes["progress"].currentValue);
+    if ('progress' in changes) {
+      if (typeof changes['progress'].currentValue !== 'number') {
+        const progress = Number(changes['progress'].currentValue);
         if (Number.isNaN(progress)) {
           this.progress = 0;
         } else {
@@ -158,7 +158,7 @@ export class ProgressBarComponent implements OnInit {
     return this.$progress;
   }
   set progress(value: number) {
-    if (typeof value !== "number") {
+    if (typeof value !== 'number') {
       const progress = Number(value);
       if (Number.isNaN(progress)) {
         this.$progress = 0;
@@ -192,7 +192,7 @@ Dưới đây là các link document mà các bạn cần tìm hiểu:
 
 ## Youtube Video
 
-https://youtu.be/uTd2W4NQkgs
+[![Day 07](https://img.youtube.com/vi/uTd2W4NQkgs/0.jpg)](https://youtu.be/uTd2W4NQkgs)
 
 ## Code sample
 

diff --git a/Day008-Component-Interaction-02.md b/Day008-Component-Interaction-02.md
@@ -28,10 +28,10 @@ export interface Author {
 ```
 
 ```typescript
-import { Component, OnInit } from "@angular/core";
-import { authors } from "../authors";
+import { Component, OnInit } from '@angular/core';
+import { authors } from '../authors';
 @Component({
-  selector: "app-author-list",
+  selector: 'app-author-list',
   template: `<app-author-detail
     *ngFor="let author of authors"
     [author]="author"
@@ -48,10 +48,10 @@ export class AuthorListComponent implements OnInit {
 Author Detail Component
 
 ```typescript
-import { Component, OnInit, Input } from "@angular/core";
-import { Author } from "../authors";
+import { Component, OnInit, Input } from '@angular/core';
+import { Author } from '../authors';
 @Component({
-  selector: "app-author-detail",
+  selector: 'app-author-detail',
   template: `
     <div *ngIf="author">
       <strong>{{ author.firstName }} {{ author.lastName }}</strong>
@@ -87,7 +87,7 @@ export class AuthorDetailComponent implements OnInit {
 
 ```typescript
 @Component({
-  selector: "app-author-list",
+  selector: 'app-author-list',
   template: `<app-author-detail
     *ngFor="let author of authors"
     [author]="author"
@@ -120,7 +120,7 @@ Dưới đây là các link document mà các bạn cần tìm hiểu:
 
 ## Youtube Video
 
-https://youtu.be/XFN75RZzMJY
+[![Day 08](https://img.youtube.com/vi/XFN75RZzMJY/0.jpg)](https://youtu.be/XFN75RZzMJY)
 
 ## Code sample