Hoang  Kim

Hoang Kim

1659080030

Cách Bắt đầu Với Angular Material UI

Angular Material là thư viện thành phần giao diện người dùng (UI) mà các nhà phát triển sử dụng trong các dự án Angular của họ nhằm đẩy nhanh quá trình phát triển để có giao diện người dùng phong cách và tương thích. Nó cung cấp cho các nhà phát triển các thành phần UI thanh lịch và chức năng như Đầu vào, Bảng dữ liệu, Thẻ, v.v. Các thành phần của nó giúp xây dựng các ứng dụng / trang web chức năng, tương thích và hấp dẫn và các trang web đáp ứng liên quan đến Độ bền thiết kế, Tính linh hoạt và Chất lượng.

Tại sao Angular Material UI?

Hãy xem xét tầm quan trọng của Angular Material trong các dự án của chúng ta để hiểu rõ hơn tại sao nó lại cần thiết cho Angular framework.

  • Các thành phần của nó được thiết kế để một trang web có thể điều chỉnh theo bất kỳ kích thước màn hình nào.
  • Nó tích hợp dễ dàng với các dự án Angular vì nó được xây dựng với cấu trúc Angular.
  • Nó có thể được kết hợp với Ứng dụng Angular mới hoặc hiện có bất chấp phiên bản.
  • Nó cung cấp các công cụ cho các nhà phát triển để xây dựng / tùy chỉnh các thành phần của họ.
  • Nó tăng tốc quá trình phát triển xây dựng các thành phần giao diện người dùng từ đầu.

Dưới đây là một vài tính năng của Angular Material:

  • Vật liệu Angular bao gồm CSS tiêu chuẩn.
  • Nó là một trình duyệt đa nền tảng và có thể được sử dụng để tạo một thành phần có thể tái sử dụng.
  • Nó có thiết kế đáp ứng được tích hợp sẵn.
  • Nó bao gồm phiên bản mới nhất của các thành phần giao diện người dùng: các nút, hộp kiểm và trường biểu mẫu, được định hình để tuân theo các khái niệm Thiết kế Vật liệu Góc.
  • Nó cung cấp các tính năng chuyên biệt và nâng cao như thanh công cụ, vuốt, điều hướng bên, thẻ, quay số nhanh và nhiều tính năng thú vị khác.

Các lựa chọn thay thế cho giao diện người dùng vật liệu Angular

Khi chúng ta nói về các lựa chọn thay thế, chúng ta đang nói về các thư viện thành phần UI khác mà chúng ta có thể sử dụng thay cho Angular Material. Sau đây là những lựa chọn thay thế khả thi, khả thi.

Ignite UI cho Angular là một bộ sưu tập toàn diện các widget, thành phần, bộ giao diện người dùng dựa trên Vật liệu và các chỉ thị đi kèm cho Angular cho phép các lập trình viên tạo ra các ứng dụng tiên tiến nhất, hiệu suất cao nhất cho các trình duyệt hiện đại, trải nghiệm di động và PWA.

Bootstrap là một thư viện mã nguồn mở cung cấp một số tiện ích Angular gốc được tạo bằng Bootstrap 4 CSS. Như bạn có thể đã biết, một trong những framework CSS được yêu thích nhất, Bootstrap, được sử dụng để tạo các ứng dụng hiện đại, kiểu dáng đẹp. Nó bao gồm các thư viện cho HTML, CSS và JavaScript. Tuy nhiên, “ng-bootstrap” cung cấp cho chúng tôi phương pháp lý tưởng để sử dụng trong các ứng dụng Angular của chúng tôi mà không cần bất kỳ tệp JS nào. Trước đây, để sử dụng các khung Bootstrap trong ứng dụng Angular, chúng tôi sẽ phải sử dụng bootstrap CSS và các tệp JavaScript của nó.

PrimeNG Một thư viện thành phần giao diện người dùng thay thế được tạo bởi PrimeFaces. Nó cung cấp nhiều chủ đề và phần tử giao diện người dùng được tạo sẵn để trình bày dữ liệu, đầu vào biểu mẫu, menu, biểu đồ, lớp phủ và các mục đích sử dụng khác. PrimeNG cung cấp một loạt các thành phần, bao gồm bảng dữ liệu, trình đơn thả xuống, nhiều lựa chọn, tin nhắn thông báo, accordions, breadcrumbs và các thành phần đầu vào khác sẽ đáp ứng phần lớn các yêu cầu về giao diện người dùng của ứng dụng của bạn. Do đó, việc bao gồm các thư viện riêng biệt cho các yêu cầu giao diện người dùng khác nhau sẽ không cần thiết.

Khởi động dự án của chúng tôi

Đối với những người mới bắt đầu chưa sử dụng Angular trước đây hoặc đây là lần đầu tiên họ dùng thử framework trước khi bắt đầu tạo dự án của mình, chúng tôi cần thiết lập môi trường của mình và để làm điều đó, chúng tôi cần cài đặt CLI bằng trình quản lý gói npm với những điều sau yêu cầu.

npm install -g @angular/cli

Khi điều này được thực hiện, chúng tôi chuyển sang tạo / xây dựng dự án của mình. n / b: chúng ta chỉ cần chạy lệnh một lần. Sau đó, chúng ta có thể bắt đầu tạo các dự án của mình. Chạy ng new my-apptrong dòng lệnh, thay thế my-appbằng tên ứng dụng của bạn.

1

Chọn Yđể định tuyến.

2

Chọn CSSphong cách.

Sau tất cả những điều đó, hãy chạy lệnh sau:

cd <your-app-name>
ng add @angular/material

3

Chọn Yđể tiếp tục.

Lệnh ng addsẽ cài đặt Angular Material , Component Dev Kit (CDK)Angular Animations . Ngoài ra, bạn có thể chọn bất kỳ chủ đề nào được tạo sẵn hoặc tùy chỉnh theo yêu cầu.

4

Nhấp Enterđể chọn chủ đề của bạn.

5

Chọn Ycho Kiểu chữ Vật liệu Góc.

6

Chọn Ycho Ảnh động.

7

Và Gói Vật liệu Angular của chúng tôi đã được cài đặt đầy đủ. Hãy chuyển sang dự án của chúng tôi và tạo một số nội dung.

Chúng tôi sẽ xóa mọi thứ trong app.component.htmlngoại trừ của chúng tôi <router-outlet></router-outlet>vì nội dung tài liệu được Angular tạo tự động và chúng tôi sẽ thay đổi nội dung đó.

Tạo nội dung của chúng tôi

Để sử dụng các thành phần Angular Material trong ứng dụng, chúng ta cần nhập các thành phần riêng lẻ trong app.module.ts file. Giả sử chúng tôi muốn hiển thị Progress spinner trong ứng dụng của mình; tất cả những gì chúng ta phải làm là nhập thành phần MatProgressSpinnerModule vào app.module.tsbên dưới:

import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';

@NgModule ({
  imports: [
    MatProgressSpinnerModule,
  ]
})
class AppModule {}

Đối với các ứng dụng lớn hơn, bạn nên tạo một tệp riêng biệt; chúng ta hãy nói material.module.tsvà nhập tất cả các thành phần riêng lẻ, sau đó nhập mô-đun vật liệu vào app.module.ts. Điều này giúp mã của chúng tôi trở nên KHÔ (“Đừng lặp lại chính bạn”), đặc biệt khi chúng tôi cần nhiều hơn một thành phần Angular Material. Thêm <mat-spinner>thẻ vào app.component.htmlbên dưới:

<mat-spinner color='warn'></mat-spinner>

Sau đó, chạy máy chủ nhà phát triển cục bộ của bạn:

ng serve

8

Tạo thành phần vật liệu

Hãy tạo một số thành phần.

Thành phần Thanh công cụ

Thành phần Thanh công cụ là nơi có thể đặt tiêu đề, tiêu đề hoặc hành động. Hầu hết thời gian, thanh công cụ chỉ với một hàng và tiêu đề chương trình sẽ được thêm vào đầu ứng dụng của bạn. Hãy tạo một thành phần tiêu đề thanh công cụ cho dự án của chúng ta.

<mat-toolbar color="primary">
    <span>My Angular Material App</span>
</mat-toolbar>

9

Một thành phần thẻ

A cardlà vùng chứa cho nội dung kết hợp văn bản, đồ họa và các hoạt động xung quanh một chủ đề duy nhất. Thẻ đơn giản nhất chỉ cần một <mat-card>phần tử chứa đầy nội dung. Thành phần thẻ của chúng tôi sẽ có tiêu đề và phụ đề, hình ảnh, đoạn văn và mô tả.

<mat-card class="card">
  <mat-card-header>
    <div mat-card-avatar class="header-image"></div>
    <mat-card-title>Mercedes-Benz 360c</mat-card-title>
    <mat-card-subtitle>Automobile</mat-card-subtitle>
  </mat-card-header>
  <img mat-card-image src="https://images.theconversation.com/files/274334/original/file-20190514-60570-gfti2h.jpg?ixlib=rb-1.1.0&q=45&auto=format&w=1200&h=900.0&fit=crop" alt="Photo of a Mercedes-Benz">
  <mat-card-content>
    <p>
      The unique 360-degree view feature on CarDekho lets you explore a car from each and every angle on your mobile device.
      Take a detailed tour of a car's exterior and interior without having to visit a showroom! For the best experience,
        download the CarDekho app.
    </p>
  </mat-card-content>
  <mat-card-actions>
    <button mat-button>LIKE</button>
    <button mat-button>SHARE</button>
  </mat-card-actions>
</mat-card>

10

Một thành phần nút

Các phần tử “nút” hoặc “a” tự nhiên được bổ sung với kiểu dáng Material Design và các gợn mực là những gì tạo thành “ Các nút vật liệu góc cạnh ”. Vì vậy, chúng tôi sẽ thêm nhiều loại nút để phù hợp với dự án của chúng tôi.

<section>
  <div class="example-button-row">
    <button mat-button>Basic</button>
    <button mat-raised-button color="primary">Primary</button>
    <button mat-stroked-button color="accent">Accent</button>
    <button mat-flat-button color="warn">Warn</button>
    <button mat-icon-button disabled aria-label="Example icon button with a open in new tab icon">
        <mat-icon>open_in_new</mat-icon>
      </button>
    <div class="example-button-container">
        <button mat-fab disabled aria-label="Example icon button with a heart icon">
          <mat-icon>favorite</mat-icon>
        </button>
      </div>
  </div>
</section>

11

Thành phần thanh lũy tiến

Thành phần thanh tiến trình của chúng tôi hiển thị hoạt động và tiến trình dưới dạng thanh tiến trình ngang. Thanh tiến trình hỗ trợ bốn chế độ hoạt động: xác định, không xác định, bộ đệm và yêu cầu. Trong phần này, chúng tôi sẽ xem xét việc sử dụng dấu hiệu không xác định bất cứ khi nào người dùng cần đợi trong khi một thứ gì đó hoàn thành và không cần thiết phải chỉ định thời gian sẽ mất bao lâu.

<mat-progress-bar mode="indeterminate"></mat-progress-bar>

11b

Trường biểu mẫu / Bộ chọn ngày

Thành phần Trường Biểu mẫu là một thành phần áp dụng các kiểu trường Văn bản phổ biến như gạch dưới, nhãn nổi và thông báo gợi ý cho một số thành phần Vật liệu góc. Đồng thời, Datepicker bao gồm một đầu vào văn bản và một cửa sổ bật lên lịch được kết hợp bởi thuộc tính Datepicker của đầu vào văn bản.

<mat-form-field appearance="fill">
  <mat-label>Choose a date</mat-label>
  <input matInput [matDatepicker]="picker">
  <mat-hint>MM/DD/YYYY</mat-hint>
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

12

Gắn kết tất cả lại với nhau

Sau nhiều lời giải thích, hãy kết hợp tất cả những gì chúng ta đã thảo luận trong bài viết của mình để tạo ra thứ gì đó có ý nghĩa đối với đôi mắt.

Tạo một thành phần

Tạo một thành phần bằng Angular CLI

  • Chạyng generate component home
  • Thiết lập các tuyến đường trong thư mục chủ của chúng tôi; thay thế các tuyến đường trống app.routing.module.tsbằng:
const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: '**', redirectTo: '/', pathMatch: 'full'}
];

Các thủ tục này sẽ tạo ra một thành phần được gọi Homevà đặt nó làm Trang chủ. Chạy ng serveđể biên dịch ứng dụng và xem văn bảnHome Works!

Thêm các thành phần Vật liệu góc

Thêm các thành phần vật liệu góc vàohome.component.html

<mat-card class="card">
  <mat-card-header>
    <div mat-card-avatar class="header-image"></div>
    <mat-card-title>Mercedes-Benz 360c</mat-card-title>
    <mat-card-subtitle>Automobile</mat-card-subtitle>
  </mat-card-header>
  <img mat-card-image src="https://images.theconversation.com/files/274334/original/file-20190514-60570-gfti2h.jpg?ixlib=rb-1.1.0&q=45&auto=format&w=1200&h=900.0&fit=crop" alt="Photo of a Mercedes-Benz">
  <mat-card-content>
    <p>
      The unique 360-degree view feature on CarDekho lets you explore a car from each and every angle on your mobile device.
      Take a detailed tour of a car's exterior and interior without having to visit a showroom! For the best experience,
        download the CarDekho app.
    </p>
  </mat-card-content>
  <mat-card-actions>
    <button mat-button>LIKE</button>
    <button mat-button>SHARE</button>
  </mat-card-actions>
</mat-card>

<div class="flex-container">
  <div>
      <button mat-raised-button color="primary"> Primary</button>
      <button mat-raised-button color="accent"> Accent</button>
      <button mat-stroked-button>Basic</button>
      <button mat-stroked-button color="primary">Primary</button>
  </div>
  <mat-form-field>
      <mat-label>Choose a date</mat-label>
      <input matInput [matDatepicker]="picker">
      <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
      <mat-datepicker #picker></mat-datepicker>
  </mat-form-field>
  <mat-checkbox>Check me!</mat-checkbox>
  <mat-slider></mat-slider>
</div>

Thêm kiểu cơ bản

Chúng tôi sẽ thêm các kiểu CSS FlexBox cơ bản để tạo khoảng cách trên Trang chủ của chúng tôi. Bạn có thể tìm thấy mã trên trang Github .

13

Sự kết luận

Với sự trợ giúp của Angular Material , chúng ta có thể xây dựng một trang web tương tác, như chúng ta thấy ở trên. Điều này cho chúng tôi biết rằng các nhà phát triển có thể xây dựng các dự án nhanh chóng hấp dẫn, đáp ứng và trực quan trong mắt người dùng trên tất cả các không gian phát triển. Đối với mã nguồn của chúng tôi, hãy nhấp vào liên kết Github .

Liên kết: https://blog.openreplay.com/getting-started-with-angular-material-ui

#angular #angularjs #javascript #ui

What is GEEK

Buddha Community

Cách Bắt đầu Với Angular Material UI

Ayyaz Zafar

1624138795

Angular Material Autocomplete - Multiple Use Cases covered

Learn How to use Angular Material Autocomplete Suggestions Search Input. I covered multiple use cases.

Please watch this video. I hope this video would be helpful for you to understand it and use it in your projects

Please subscribe: https://www.youtube.com/channel/UCL5nKCmpReJZZMe9_bYR89w

#angular #angular-material #angular-js #autocomplete #angular-material-autocomplete #angular-tutorial

Hoang  Kim

Hoang Kim

1659080030

Cách Bắt đầu Với Angular Material UI

Angular Material là thư viện thành phần giao diện người dùng (UI) mà các nhà phát triển sử dụng trong các dự án Angular của họ nhằm đẩy nhanh quá trình phát triển để có giao diện người dùng phong cách và tương thích. Nó cung cấp cho các nhà phát triển các thành phần UI thanh lịch và chức năng như Đầu vào, Bảng dữ liệu, Thẻ, v.v. Các thành phần của nó giúp xây dựng các ứng dụng / trang web chức năng, tương thích và hấp dẫn và các trang web đáp ứng liên quan đến Độ bền thiết kế, Tính linh hoạt và Chất lượng.

Tại sao Angular Material UI?

Hãy xem xét tầm quan trọng của Angular Material trong các dự án của chúng ta để hiểu rõ hơn tại sao nó lại cần thiết cho Angular framework.

  • Các thành phần của nó được thiết kế để một trang web có thể điều chỉnh theo bất kỳ kích thước màn hình nào.
  • Nó tích hợp dễ dàng với các dự án Angular vì nó được xây dựng với cấu trúc Angular.
  • Nó có thể được kết hợp với Ứng dụng Angular mới hoặc hiện có bất chấp phiên bản.
  • Nó cung cấp các công cụ cho các nhà phát triển để xây dựng / tùy chỉnh các thành phần của họ.
  • Nó tăng tốc quá trình phát triển xây dựng các thành phần giao diện người dùng từ đầu.

Dưới đây là một vài tính năng của Angular Material:

  • Vật liệu Angular bao gồm CSS tiêu chuẩn.
  • Nó là một trình duyệt đa nền tảng và có thể được sử dụng để tạo một thành phần có thể tái sử dụng.
  • Nó có thiết kế đáp ứng được tích hợp sẵn.
  • Nó bao gồm phiên bản mới nhất của các thành phần giao diện người dùng: các nút, hộp kiểm và trường biểu mẫu, được định hình để tuân theo các khái niệm Thiết kế Vật liệu Góc.
  • Nó cung cấp các tính năng chuyên biệt và nâng cao như thanh công cụ, vuốt, điều hướng bên, thẻ, quay số nhanh và nhiều tính năng thú vị khác.

Các lựa chọn thay thế cho giao diện người dùng vật liệu Angular

Khi chúng ta nói về các lựa chọn thay thế, chúng ta đang nói về các thư viện thành phần UI khác mà chúng ta có thể sử dụng thay cho Angular Material. Sau đây là những lựa chọn thay thế khả thi, khả thi.

Ignite UI cho Angular là một bộ sưu tập toàn diện các widget, thành phần, bộ giao diện người dùng dựa trên Vật liệu và các chỉ thị đi kèm cho Angular cho phép các lập trình viên tạo ra các ứng dụng tiên tiến nhất, hiệu suất cao nhất cho các trình duyệt hiện đại, trải nghiệm di động và PWA.

Bootstrap là một thư viện mã nguồn mở cung cấp một số tiện ích Angular gốc được tạo bằng Bootstrap 4 CSS. Như bạn có thể đã biết, một trong những framework CSS được yêu thích nhất, Bootstrap, được sử dụng để tạo các ứng dụng hiện đại, kiểu dáng đẹp. Nó bao gồm các thư viện cho HTML, CSS và JavaScript. Tuy nhiên, “ng-bootstrap” cung cấp cho chúng tôi phương pháp lý tưởng để sử dụng trong các ứng dụng Angular của chúng tôi mà không cần bất kỳ tệp JS nào. Trước đây, để sử dụng các khung Bootstrap trong ứng dụng Angular, chúng tôi sẽ phải sử dụng bootstrap CSS và các tệp JavaScript của nó.

PrimeNG Một thư viện thành phần giao diện người dùng thay thế được tạo bởi PrimeFaces. Nó cung cấp nhiều chủ đề và phần tử giao diện người dùng được tạo sẵn để trình bày dữ liệu, đầu vào biểu mẫu, menu, biểu đồ, lớp phủ và các mục đích sử dụng khác. PrimeNG cung cấp một loạt các thành phần, bao gồm bảng dữ liệu, trình đơn thả xuống, nhiều lựa chọn, tin nhắn thông báo, accordions, breadcrumbs và các thành phần đầu vào khác sẽ đáp ứng phần lớn các yêu cầu về giao diện người dùng của ứng dụng của bạn. Do đó, việc bao gồm các thư viện riêng biệt cho các yêu cầu giao diện người dùng khác nhau sẽ không cần thiết.

Khởi động dự án của chúng tôi

Đối với những người mới bắt đầu chưa sử dụng Angular trước đây hoặc đây là lần đầu tiên họ dùng thử framework trước khi bắt đầu tạo dự án của mình, chúng tôi cần thiết lập môi trường của mình và để làm điều đó, chúng tôi cần cài đặt CLI bằng trình quản lý gói npm với những điều sau yêu cầu.

npm install -g @angular/cli

Khi điều này được thực hiện, chúng tôi chuyển sang tạo / xây dựng dự án của mình. n / b: chúng ta chỉ cần chạy lệnh một lần. Sau đó, chúng ta có thể bắt đầu tạo các dự án của mình. Chạy ng new my-apptrong dòng lệnh, thay thế my-appbằng tên ứng dụng của bạn.

1

Chọn Yđể định tuyến.

2

Chọn CSSphong cách.

Sau tất cả những điều đó, hãy chạy lệnh sau:

cd <your-app-name>
ng add @angular/material

3

Chọn Yđể tiếp tục.

Lệnh ng addsẽ cài đặt Angular Material , Component Dev Kit (CDK)Angular Animations . Ngoài ra, bạn có thể chọn bất kỳ chủ đề nào được tạo sẵn hoặc tùy chỉnh theo yêu cầu.

4

Nhấp Enterđể chọn chủ đề của bạn.

5

Chọn Ycho Kiểu chữ Vật liệu Góc.

6

Chọn Ycho Ảnh động.

7

Và Gói Vật liệu Angular của chúng tôi đã được cài đặt đầy đủ. Hãy chuyển sang dự án của chúng tôi và tạo một số nội dung.

Chúng tôi sẽ xóa mọi thứ trong app.component.htmlngoại trừ của chúng tôi <router-outlet></router-outlet>vì nội dung tài liệu được Angular tạo tự động và chúng tôi sẽ thay đổi nội dung đó.

Tạo nội dung của chúng tôi

Để sử dụng các thành phần Angular Material trong ứng dụng, chúng ta cần nhập các thành phần riêng lẻ trong app.module.ts file. Giả sử chúng tôi muốn hiển thị Progress spinner trong ứng dụng của mình; tất cả những gì chúng ta phải làm là nhập thành phần MatProgressSpinnerModule vào app.module.tsbên dưới:

import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';

@NgModule ({
  imports: [
    MatProgressSpinnerModule,
  ]
})
class AppModule {}

Đối với các ứng dụng lớn hơn, bạn nên tạo một tệp riêng biệt; chúng ta hãy nói material.module.tsvà nhập tất cả các thành phần riêng lẻ, sau đó nhập mô-đun vật liệu vào app.module.ts. Điều này giúp mã của chúng tôi trở nên KHÔ (“Đừng lặp lại chính bạn”), đặc biệt khi chúng tôi cần nhiều hơn một thành phần Angular Material. Thêm <mat-spinner>thẻ vào app.component.htmlbên dưới:

<mat-spinner color='warn'></mat-spinner>

Sau đó, chạy máy chủ nhà phát triển cục bộ của bạn:

ng serve

8

Tạo thành phần vật liệu

Hãy tạo một số thành phần.

Thành phần Thanh công cụ

Thành phần Thanh công cụ là nơi có thể đặt tiêu đề, tiêu đề hoặc hành động. Hầu hết thời gian, thanh công cụ chỉ với một hàng và tiêu đề chương trình sẽ được thêm vào đầu ứng dụng của bạn. Hãy tạo một thành phần tiêu đề thanh công cụ cho dự án của chúng ta.

<mat-toolbar color="primary">
    <span>My Angular Material App</span>
</mat-toolbar>

9

Một thành phần thẻ

A cardlà vùng chứa cho nội dung kết hợp văn bản, đồ họa và các hoạt động xung quanh một chủ đề duy nhất. Thẻ đơn giản nhất chỉ cần một <mat-card>phần tử chứa đầy nội dung. Thành phần thẻ của chúng tôi sẽ có tiêu đề và phụ đề, hình ảnh, đoạn văn và mô tả.

<mat-card class="card">
  <mat-card-header>
    <div mat-card-avatar class="header-image"></div>
    <mat-card-title>Mercedes-Benz 360c</mat-card-title>
    <mat-card-subtitle>Automobile</mat-card-subtitle>
  </mat-card-header>
  <img mat-card-image src="https://images.theconversation.com/files/274334/original/file-20190514-60570-gfti2h.jpg?ixlib=rb-1.1.0&q=45&auto=format&w=1200&h=900.0&fit=crop" alt="Photo of a Mercedes-Benz">
  <mat-card-content>
    <p>
      The unique 360-degree view feature on CarDekho lets you explore a car from each and every angle on your mobile device.
      Take a detailed tour of a car's exterior and interior without having to visit a showroom! For the best experience,
        download the CarDekho app.
    </p>
  </mat-card-content>
  <mat-card-actions>
    <button mat-button>LIKE</button>
    <button mat-button>SHARE</button>
  </mat-card-actions>
</mat-card>

10

Một thành phần nút

Các phần tử “nút” hoặc “a” tự nhiên được bổ sung với kiểu dáng Material Design và các gợn mực là những gì tạo thành “ Các nút vật liệu góc cạnh ”. Vì vậy, chúng tôi sẽ thêm nhiều loại nút để phù hợp với dự án của chúng tôi.

<section>
  <div class="example-button-row">
    <button mat-button>Basic</button>
    <button mat-raised-button color="primary">Primary</button>
    <button mat-stroked-button color="accent">Accent</button>
    <button mat-flat-button color="warn">Warn</button>
    <button mat-icon-button disabled aria-label="Example icon button with a open in new tab icon">
        <mat-icon>open_in_new</mat-icon>
      </button>
    <div class="example-button-container">
        <button mat-fab disabled aria-label="Example icon button with a heart icon">
          <mat-icon>favorite</mat-icon>
        </button>
      </div>
  </div>
</section>

11

Thành phần thanh lũy tiến

Thành phần thanh tiến trình của chúng tôi hiển thị hoạt động và tiến trình dưới dạng thanh tiến trình ngang. Thanh tiến trình hỗ trợ bốn chế độ hoạt động: xác định, không xác định, bộ đệm và yêu cầu. Trong phần này, chúng tôi sẽ xem xét việc sử dụng dấu hiệu không xác định bất cứ khi nào người dùng cần đợi trong khi một thứ gì đó hoàn thành và không cần thiết phải chỉ định thời gian sẽ mất bao lâu.

<mat-progress-bar mode="indeterminate"></mat-progress-bar>

11b

Trường biểu mẫu / Bộ chọn ngày

Thành phần Trường Biểu mẫu là một thành phần áp dụng các kiểu trường Văn bản phổ biến như gạch dưới, nhãn nổi và thông báo gợi ý cho một số thành phần Vật liệu góc. Đồng thời, Datepicker bao gồm một đầu vào văn bản và một cửa sổ bật lên lịch được kết hợp bởi thuộc tính Datepicker của đầu vào văn bản.

<mat-form-field appearance="fill">
  <mat-label>Choose a date</mat-label>
  <input matInput [matDatepicker]="picker">
  <mat-hint>MM/DD/YYYY</mat-hint>
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

12

Gắn kết tất cả lại với nhau

Sau nhiều lời giải thích, hãy kết hợp tất cả những gì chúng ta đã thảo luận trong bài viết của mình để tạo ra thứ gì đó có ý nghĩa đối với đôi mắt.

Tạo một thành phần

Tạo một thành phần bằng Angular CLI

  • Chạyng generate component home
  • Thiết lập các tuyến đường trong thư mục chủ của chúng tôi; thay thế các tuyến đường trống app.routing.module.tsbằng:
const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: '**', redirectTo: '/', pathMatch: 'full'}
];

Các thủ tục này sẽ tạo ra một thành phần được gọi Homevà đặt nó làm Trang chủ. Chạy ng serveđể biên dịch ứng dụng và xem văn bảnHome Works!

Thêm các thành phần Vật liệu góc

Thêm các thành phần vật liệu góc vàohome.component.html

<mat-card class="card">
  <mat-card-header>
    <div mat-card-avatar class="header-image"></div>
    <mat-card-title>Mercedes-Benz 360c</mat-card-title>
    <mat-card-subtitle>Automobile</mat-card-subtitle>
  </mat-card-header>
  <img mat-card-image src="https://images.theconversation.com/files/274334/original/file-20190514-60570-gfti2h.jpg?ixlib=rb-1.1.0&q=45&auto=format&w=1200&h=900.0&fit=crop" alt="Photo of a Mercedes-Benz">
  <mat-card-content>
    <p>
      The unique 360-degree view feature on CarDekho lets you explore a car from each and every angle on your mobile device.
      Take a detailed tour of a car's exterior and interior without having to visit a showroom! For the best experience,
        download the CarDekho app.
    </p>
  </mat-card-content>
  <mat-card-actions>
    <button mat-button>LIKE</button>
    <button mat-button>SHARE</button>
  </mat-card-actions>
</mat-card>

<div class="flex-container">
  <div>
      <button mat-raised-button color="primary"> Primary</button>
      <button mat-raised-button color="accent"> Accent</button>
      <button mat-stroked-button>Basic</button>
      <button mat-stroked-button color="primary">Primary</button>
  </div>
  <mat-form-field>
      <mat-label>Choose a date</mat-label>
      <input matInput [matDatepicker]="picker">
      <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
      <mat-datepicker #picker></mat-datepicker>
  </mat-form-field>
  <mat-checkbox>Check me!</mat-checkbox>
  <mat-slider></mat-slider>
</div>

Thêm kiểu cơ bản

Chúng tôi sẽ thêm các kiểu CSS FlexBox cơ bản để tạo khoảng cách trên Trang chủ của chúng tôi. Bạn có thể tìm thấy mã trên trang Github .

13

Sự kết luận

Với sự trợ giúp của Angular Material , chúng ta có thể xây dựng một trang web tương tác, như chúng ta thấy ở trên. Điều này cho chúng tôi biết rằng các nhà phát triển có thể xây dựng các dự án nhanh chóng hấp dẫn, đáp ứng và trực quan trong mắt người dùng trên tất cả các không gian phát triển. Đối với mã nguồn của chúng tôi, hãy nhấp vào liên kết Github .

Liên kết: https://blog.openreplay.com/getting-started-with-angular-material-ui

#angular #angularjs #javascript #ui

Christa  Stehr

Christa Stehr

1598940617

Install Angular - Angular Environment Setup Process

Angular is a TypeScript based framework that works in synchronization with HTML, CSS, and JavaScript. To work with angular, domain knowledge of these 3 is required.

  1. Installing Node.js and npm
  2. Installing Angular CLI
  3. Creating workspace
  4. Deploying your First App

In this article, you will get to know about the Angular Environment setup process. After reading this article, you will be able to install, setup, create, and launch your own application in Angular. So let’s start!!!

Angular environment setup

Install Angular in Easy Steps

For Installing Angular on your Machine, there are 2 prerequisites:

  • Node.js
  • npm Package Manager
Node.js

First you need to have Node.js installed as Angular require current, active LTS or maintenance LTS version of Node.js

Download and Install Node.js version suitable for your machine’s operating system.

Npm Package Manager

Angular, Angular CLI and Angular applications are dependent on npm packages. By installing Node.js, you have automatically installed the npm Package manager which will be the base for installing angular in your system. To check the presence of npm client and Angular version check of npm client, run this command:

  1. npm -v

Installing Angular CLI

  • Open Terminal/Command Prompt
  • To install Angular CLI, run the below command:
  1. npm install -g @angular/cli

installing angular CLI

· After executing the command, Angular CLI will get installed within some time. You can check it using the following command

  1. ng --version

Workspace Creation

Now as your Angular CLI is installed, you need to create a workspace to work upon your application. Methods for it are:

  • Using CLI
  • Using Visual Studio Code
1. Using CLI

To create a workspace:

  • Navigate to the desired directory where you want to create your workspace using cd command in the Terminal/Command prompt
  • Then in the directory write this command on your terminal and provide the name of the app which you want to create. In my case I have mentioned DataFlair:
  1. Ng new YourAppName

create angular workspace

  • After running this command, it will prompt you to select from various options about the CSS and other functionalities.

angular CSS options

  • To leave everything to default, simply press the Enter or the Return key.

angular setup

#angular tutorials #angular cli install #angular environment setup #angular version check #download angular #install angular #install angular cli

Roberta  Ward

Roberta Ward

1593184320

Basics of Angular: Part-1

What is Angular? What it does? How we implement it in a project? So, here are some basics of angular to let you learn more about angular.

Angular is a Typescript-based open-source front-end web application platform. The Angular Team at Google and a community of individuals and corporations lead it. Angular lets you extend HTML’s syntax to express your apps’ components clearly. The angular resolves challenges while developing a single page and cross-platform applications. So, here the meaning of the single-page applications in angular is that the index.html file serves the app. And, the index.html file links other files to it.

We build angular applications with basic concepts which are NgModules. It provides a compilation context for components. At the beginning of an angular project, the command-line interface provides a built-in component which is the root component. But, NgModule can add a number of additional components. These can be created through a template or loaded from a router. This is what a compilation context about.

What is a Component in Angular?

Components are key features in Angular. It controls a patch of the screen called a view. A couple of components that we create on our own helps to build a whole application. In the end, the root component or the app component holds our entire application. The component has its business logic that it does to support the view inside the class. The class interacts with the view through an API of properties and methods. All the components added by us in the application are not linked to the index.html. But, they link to the app.component.html through the selectors. A component can be a component and not only a typescript class by adding a decorator @Component. Then, for further access, a class can import it. The decorator contains some metadata like selector, template, and style. Here’s an example of how a component decorator looks like:

@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html',
    styleUrls: ['app.component.scss']
})

Role of App Module

Modules are the package of functionalities of our app. It gives Angular the information about which features does my app has and what feature it uses. It is an empty Typescript class, but we transform it by adding a decorator @NgModule. So, we have four properties that we set up on the object pass to @NgModule. The four properties are declarations, imports, providers, and bootstrap. All the built-in new components add up to the declarations array in @NgModule.

@NgModule({
declarations: [
  AppComponent,
],
imports: [
  BrowserModule,
  HttpClientModule,
  AppRoutingModule,
  FormsModule
],
bootstrap: [AppComponent]
})

What is Data Binding?

Data Binding is the communication between the Typescript code of the component and the template. So, we have different kinds of data binding given below:

  • When there is a requirement to output data from our Typescript code in the HTML template. String interpolation handles this purpose like {{data}} in HTML file. Property Binding is also used for this purpose like [property] = “data”.
  • When we want to trigger any event like clicking a button. Event Binding works while we react to user events like (event) = “expression”.
  • When we can react to user events and output something at the same time. Two-way Binding is used like [(ngModel)] = “data”.

image for understanding data binding

#angular #javascript #tech blogs #user interface (ui) #angular #angular fundamentals #angular tutorial #basics of angular

Monty  Boehm

Monty Boehm

1625127900

Angular Material 12 File Upload Example with Progress Bar

In this tutorial, I will show you way to build an Angular Material 12 File upload to Rest API example using HttpClient, FormData and Progress Bar.

More Practice:

–  Angular Material 12 Image upload with Preview example

–  Angular 12 + Spring Boot: File upload example

–  Angular 12 + Node.js: File Upload example

–  Angular 12 Login and Registration example with JWT & Web Api

–  Angular 12 CRUD Application example with Web API

–  Angular 12 Form Validation example (Reactive Forms)

– Bootstrap instead:  Angular 12 File upload example with progress bar & Bootstrap

#angular #angular #angular 12 #angular material #file