山田  千代

山田 千代

1659102004

如何開始使用 Angular Material UI

Angular Material是一個用戶界面 (UI) 組件庫,開發人員在他們的 Angular 項目中使用它來加快開發過程,以獲得時尚且兼容的用戶界面。它為開發人員提供了功能強大且優雅的 UI 組件,例如輸入、數據表、卡片等等。它的組件有助於構建功能性、兼容和引人入勝的 Web 應用程序/頁面和響應式網站,涉及設計耐久性、多功能性和質量。

為什麼選擇 Angular 材質 UI?

讓我們檢查一下 Angular Material 在我們項目中的重要性,以更好地理解為什麼它對 Angular 框架至關重要。

  • 它的組件經過精心設計,使網站可以適應任何屏幕尺寸。
  • 它很容易與 Angular 項目集成,因為它是用 Angular 結構構建的。
  • 不管版本如何,它都可以與新的或現有的 Angular 應用程序合併。
  • 它為開發人員提供構建/定制其組件的工具。
  • 它加快了從頭開始構建 UI 組件的開發過程。

以下是 Angular Material 的一些特性:

  • Angular Material 由標準 CSS 組成。
  • 它是一個跨平台瀏覽器,可用於創建可重用組件。
  • 它內置了響應式設計。
  • 它包括最新版本的 UI 組件:按鈕、複選框和表單字段,其形狀遵循 Angular Material Design 概念。
  • 它提供了專門和高級的功能,例如工具欄、滑動、側導航、卡片、快速撥號以及更多令人興奮的功能。

Angular Material UI 的替代品

當我們談論替代品時,我們談論的是可以用來代替 Angular Material 的其他 UI 組件庫。以下是可能的、可行的替代方案。

Ignite UI for Angular 是基於 Material 的 UI 小部件、組件、UI 工具包和 Angular 隨附指令的綜合集合,使程序員能夠為當代瀏覽器、移動體驗和 PWA 創建最前沿、高性能的應用程序。

Bootstrap是一個開源庫,它提供了一些使用 Bootstrap 4 CSS 製作的原生 Angular 小部件。您可能已經知道,最受歡迎的 CSS 框架之一 Bootstrap 用於創建時尚、現代的應用程序。它包括用於 HTML、CSS 和 JavaScript 的庫。但是,“ng-bootstrap”為我們提供了在沒有任何 JS 文件的情況下在 Angular 應用程序中使用的理想方法。以前,要在 Angular 應用程序中使用 Bootstrap 框架,我們必須使用 bootstrap CSS 及其 JavaScript 文件。

PrimeNG PrimeFaces 創建的替代 UI 組件庫。它為數據表示、表單輸入、菜單、圖表、覆蓋和其他用途提供了各種預構建的主題和 UI 元素。PrimeNG 提供了廣泛的組件,包括數據表、下拉菜單、多選、通知消息、折疊式、麵包屑和其他輸入組件,可以滿足您應用程序的大部分 UI 要求。因此,沒有必要為各種 UI 要求包括不同的庫。

啟動我們的項目

對於之前沒有使用過Angular的初學者,或者在我們開始創建項目之前這是他們第一次嘗試框架,我們需要設置我們的環境,為此我們需要使用 npm 包管理器安裝CLI,並使用以下內容命令。

npm install -g @angular/cli

完成後,我們將繼續創建/構建我們的項目。n/b:我們只需要運行一次命令。之後,我們就可以開始創建我們的項目了。ng new my-app在命令行中運行,替換my-app為您的應用程序的名稱。

第一的

選擇Y路由。

2

選擇CSS樣式。

畢竟,運行以下命令:

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

3

選擇Y繼續。

ng add命令將安裝Angular MaterialComponent Dev Kit (CDK)Angular Animations。此外,您將根據需要選擇任何預建或自定義主題。

4

單擊Enter以選擇您的主題。

5

選擇YAngular Material Typography。

6

選擇Y動畫。

7

我們的 Angular Material Package 已完全安裝。讓我們繼續我們的項目並創建一些內容。

我們將刪除我們的所有內容app.component.html<router-outlet></router-outlet>因為材料內容是由 Angular 自動生成的,我們將對其進行更改。

創建我們的內容

要在應用程序中使用Angular Material 組件,我們需要在app.module.ts file. 假設我們想在我們的應用程序中顯示進度微調器;我們所要做的就是將 MatProgressSpinnerModule 組件導入到我們的app.module.ts下面:

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

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

對於較大的應用程序,您應該創建一個單獨的文件;讓我們說material.module.ts,並導入所有單獨的組件,然後將材料模塊導入app.module.ts. 這有助於我們的代碼變得 DRY(“不要重複自己”),尤其是當我們需要多個 Angular Material 組件時。將<mat-spinner>標籤添加到app.component.html以下內容:

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

然後,運行本地開發服務器:

ng serve

8

生成材質組件

讓我們創建一些組件。

工具欄組件

工具欄組件是可以放置標題、標題或操作的地方。大多數時候,只有一行和程序標題的工具欄將添加到應用程序的頂部。讓我們為我們的項目創建一個工具欄標題組件。

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

9

卡片組件

Acard是一個內容容器,它圍繞一個主題混合了文本、圖形和活動。最直接的卡片只需要一個內容填充的<mat-card>元素。我們的卡片組件將具有標題和副標題、圖像、段落和描述。

<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>

十

一個按鈕組件

原生“按鈕”或“a”元素輔以 Material Design 樣式和墨水波紋,構成了“ Angular Material Buttons ”。因此,我們將添加各種按鈕以適應我們的項目。

<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

進度條組件

我們的進度條組件將活動和進度顯示為水平進度條。進度條支持四種操作模式:確定、不確定、緩沖和查詢。在本節中,我們將考慮在用戶需要等待某事完成時使用不確定符號,並且沒有必要指定需要多長時間。

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

11b

表單字段/日期選擇器

表單字段組件是將流行的文本字段樣式(如下劃線、浮動標籤和提示消息)應用於多個 Angular Material 組件的組件。同時,Datepicker包含一個文本輸入和一個由文本輸入的 Datepicker 屬性連接的日曆彈出窗口。

<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>

第十二

放在一起

經過大量的解釋,讓我們將我們在文章中討論的所有內容結合起來,產生一些對眼睛有意義的東西。

生成組件

使用Angular CLI生成組件

  • ng generate component home
  • 在我們的主文件夾中設置路線;將空路由替換為app.routing.module.ts
const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: '**', redirectTo: '/', pathMatch: 'full'}
];

這些過程將創建一個名為的組件Home並將其設置為主頁。運行ng serve編譯應用程序並查看文本Home Works!

添加角度材質組件

Angular 材質組件添加到home.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>

添加基本​​樣式

我們將添加基本的 CSS FlexBox 樣式以在我們的主頁上創建間距。您可以在Github頁面上找到代碼。

13

結論

在Angular Material的幫助下,我們可以構建一個交互式網頁,如上所示。這告訴我們,開發人員可以在所有開發空間中構建在用戶眼中有吸引力、響應迅速且直觀的快速項目。對於我們的源代碼,請單擊Github 鏈接

鏈接:https ://blog.openreplay.com/getting-started-with-angular-material-ui

#angular #angularjs #javascript #ui

What is GEEK

Buddha Community

如何開始使用 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

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

Clara  Gutmann

Clara Gutmann

1599467280

Angular 10 Material Table with Pagination, Filtering, Sorting

Angular material table is an inbuilt component that can be used to create a table where the user can searching, sorting, filtering, and paging rows. We use Angular 10 and Angular 10 Material for this demo example.  Angular Material is the ground running with significant, modern UI components that work across the web, mobile, and desktop applications.

Angular Material components will help us to construct attractive UI and UX, consistent, and functional web pages and web applications while keeping the modern web design principles like browser portability and compatibility. In today’s post, we will use the table component in the Angular Material library. So let us start an Angular 10 Material Table Example For beginners.

Angular material table

First, install an Angular 10**.** We are using Angular CLI version 10 to install the Angular. Right now, Angular 10 is the latest version. So if you have not installed Angular CLI, then install it using the following command. It will install the Angular CLI 8 because right now, it is the latest version, and from that, you will install Angular 10.

#angular #angular 10 #angular material #angular cli