Как начать работу с пользовательским интерфейсом Angular Material

Angular Material — это библиотека компонентов пользовательского интерфейса (UI), которую разработчики используют в своих проектах Angular с точки зрения ускорения процесса разработки стильного и совместимого пользовательского интерфейса. Он предлагает разработчикам функциональные и элегантные компоненты пользовательского интерфейса, такие как входы, таблицы данных, карты и многое другое. Его компоненты помогают создавать функциональные, совместимые и привлекательные веб-приложения/страницы, а также адаптивные веб-сайты с точки зрения долговечности, универсальности и качества дизайна.

Почему интерфейс Angular Material?

Давайте рассмотрим значение Angular Material в наших проектах, чтобы лучше понять, почему он важен для фреймворка Angular.

  • Его компоненты спроектированы таким образом, что сайт может подстраиваться под любой размер экрана.
  • Он легко интегрируется с Angular Projects, потому что он построен с использованием структуры Angular.
  • Его можно включить в новое или существующее приложение Angular независимо от версии.
  • Он предоставляет разработчикам инструменты для создания/настройки своих компонентов.
  • Это ускоряет процесс разработки компонентов пользовательского интерфейса с нуля.

Ниже приведены некоторые особенности Angular Material:

  • Angular Material состоит из стандартного CSS.
  • Это кроссплатформенный браузер, который можно использовать для создания повторно используемого компонента.
  • Он имеет встроенный адаптивный дизайн.
  • Он включает в себя последнюю версию компонентов пользовательского интерфейса: кнопки, флажки и поле формы, форма которых соответствует концепциям Angular Material Design.
  • Он предоставляет специализированные и расширенные функции, такие как панель инструментов, прокрутка, боковая навигация, карты, быстрый набор и многие другие интересные функции.

Альтернативы пользовательскому интерфейсу Angular Material

Когда мы говорим об альтернативах, мы говорим о других библиотеках компонентов пользовательского интерфейса, которые мы можем использовать вместо Angular Material. Возможны следующие жизнеспособные альтернативы.

Ignite UI for Angular — это исчерпывающая коллекция виджетов пользовательского интерфейса, компонентов, наборов пользовательского интерфейса и сопутствующих директив для Angular на основе материалов, которая позволяет программистам создавать самые передовые и высокопроизводительные приложения для современных браузеров, мобильных приложений и PWA.

Bootstrap — это библиотека с открытым исходным кодом, которая предлагает несколько собственных виджетов Angular, созданных с помощью Bootstrap 4 CSS. Как вы, наверное, уже знаете, один из самых популярных фреймворков CSS, Bootstrap, используется для создания стильных современных приложений. Он включает библиотеки для HTML, CSS и JavaScript. Однако «ng-bootstrap» предоставляет нам идеальный метод для использования в наших приложениях Angular без какого-либо JS-файла. Раньше, чтобы использовать фреймворки Bootstrap в приложении Angular, нам приходилось использовать загрузочный CSS и его файлы JavaScript.

PrimeNG Альтернативная библиотека компонентов пользовательского интерфейса, созданная PrimeFaces. Он предоставляет множество предварительно созданных тем и элементов пользовательского интерфейса для представления данных, ввода форм, меню, диаграмм, наложений и других целей. PrimeNG предлагает широкий спектр компонентов, включая таблицы данных, раскрывающиеся списки, множественный выбор, уведомления, аккордеоны, хлебные крошки и другие компоненты ввода, которые соответствуют большинству требований пользовательского интерфейса вашего приложения. Следовательно, нет необходимости включать отдельные библиотеки для различных требований пользовательского интерфейса.

Запускаем наш проект

Для новичков, которые раньше не использовали Angular или впервые пробуют фреймворк, прежде чем мы начнем создавать наш проект, нам нужно настроить нашу среду , и для этого нам нужно установить CLI с помощью диспетчера пакетов npm со следующим команда.

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 Material , Component Dev Kit (CDK) и Angular Animations . Кроме того, вы можете выбрать любую из готовых или пользовательских тем по мере необходимости.

4

Нажмите Enter, чтобы выбрать тему.

5

Выберите Yтипографику углового материала.

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. Это помогает нашему коду быть СУХИМ («Не повторяйтесь»), особенно когда нам нужно более одного компонента 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

Карточный компонент

A card— это контейнер для контента, который сочетает в себе текст, графику и действия по одной теме. Самая простая карта нуждается только в <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>

10

Компонент кнопки

Нативные элементы «кнопка» или «а», дополненные стилем Material Design и чернильной рябью, составляют « Кнопки углового материала ». Итак, мы добавим различные кнопки в соответствии с нашим проектом.

<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

Компонент Progressive Bar

Наш компонент Progressive Bar показывает активность и прогресс в виде горизонтального индикатора выполнения. Индикатор выполнения поддерживает четыре режима работы: определенный, неопределенный, буфер и запрос. В этом разделе мы рассмотрим использование неопределенного знака всякий раз, когда пользователю нужно подождать, пока что-то завершится, и нет необходимости указывать, сколько времени это займет.

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

11б

Поле формы/ средство выбора даты

Компонент поля формы — это компонент, который применяет популярные стили текстового поля, такие как подчеркивание, плавающая метка и сообщения-подсказки, к нескольким компонентам 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 Material

Добавьте компоненты углового материала в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

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

Как начать работу с пользовательским интерфейсом Angular Material

Angular Material — это библиотека компонентов пользовательского интерфейса (UI), которую разработчики используют в своих проектах Angular с точки зрения ускорения процесса разработки стильного и совместимого пользовательского интерфейса. Он предлагает разработчикам функциональные и элегантные компоненты пользовательского интерфейса, такие как входы, таблицы данных, карты и многое другое. Его компоненты помогают создавать функциональные, совместимые и привлекательные веб-приложения/страницы, а также адаптивные веб-сайты с точки зрения долговечности, универсальности и качества дизайна.

Почему интерфейс Angular Material?

Давайте рассмотрим значение Angular Material в наших проектах, чтобы лучше понять, почему он важен для фреймворка Angular.

  • Его компоненты спроектированы таким образом, что сайт может подстраиваться под любой размер экрана.
  • Он легко интегрируется с Angular Projects, потому что он построен с использованием структуры Angular.
  • Его можно включить в новое или существующее приложение Angular независимо от версии.
  • Он предоставляет разработчикам инструменты для создания/настройки своих компонентов.
  • Это ускоряет процесс разработки компонентов пользовательского интерфейса с нуля.

Ниже приведены некоторые особенности Angular Material:

  • Angular Material состоит из стандартного CSS.
  • Это кроссплатформенный браузер, который можно использовать для создания повторно используемого компонента.
  • Он имеет встроенный адаптивный дизайн.
  • Он включает в себя последнюю версию компонентов пользовательского интерфейса: кнопки, флажки и поле формы, форма которых соответствует концепциям Angular Material Design.
  • Он предоставляет специализированные и расширенные функции, такие как панель инструментов, прокрутка, боковая навигация, карты, быстрый набор и многие другие интересные функции.

Альтернативы пользовательскому интерфейсу Angular Material

Когда мы говорим об альтернативах, мы говорим о других библиотеках компонентов пользовательского интерфейса, которые мы можем использовать вместо Angular Material. Возможны следующие жизнеспособные альтернативы.

Ignite UI for Angular — это исчерпывающая коллекция виджетов пользовательского интерфейса, компонентов, наборов пользовательского интерфейса и сопутствующих директив для Angular на основе материалов, которая позволяет программистам создавать самые передовые и высокопроизводительные приложения для современных браузеров, мобильных приложений и PWA.

Bootstrap — это библиотека с открытым исходным кодом, которая предлагает несколько собственных виджетов Angular, созданных с помощью Bootstrap 4 CSS. Как вы, наверное, уже знаете, один из самых популярных фреймворков CSS, Bootstrap, используется для создания стильных современных приложений. Он включает библиотеки для HTML, CSS и JavaScript. Однако «ng-bootstrap» предоставляет нам идеальный метод для использования в наших приложениях Angular без какого-либо JS-файла. Раньше, чтобы использовать фреймворки Bootstrap в приложении Angular, нам приходилось использовать загрузочный CSS и его файлы JavaScript.

PrimeNG Альтернативная библиотека компонентов пользовательского интерфейса, созданная PrimeFaces. Он предоставляет множество предварительно созданных тем и элементов пользовательского интерфейса для представления данных, ввода форм, меню, диаграмм, наложений и других целей. PrimeNG предлагает широкий спектр компонентов, включая таблицы данных, раскрывающиеся списки, множественный выбор, уведомления, аккордеоны, хлебные крошки и другие компоненты ввода, которые соответствуют большинству требований пользовательского интерфейса вашего приложения. Следовательно, нет необходимости включать отдельные библиотеки для различных требований пользовательского интерфейса.

Запускаем наш проект

Для новичков, которые раньше не использовали Angular или впервые пробуют фреймворк, прежде чем мы начнем создавать наш проект, нам нужно настроить нашу среду , и для этого нам нужно установить CLI с помощью диспетчера пакетов npm со следующим команда.

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 Material , Component Dev Kit (CDK) и Angular Animations . Кроме того, вы можете выбрать любую из готовых или пользовательских тем по мере необходимости.

4

Нажмите Enter, чтобы выбрать тему.

5

Выберите Yтипографику углового материала.

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. Это помогает нашему коду быть СУХИМ («Не повторяйтесь»), особенно когда нам нужно более одного компонента 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

Карточный компонент

A card— это контейнер для контента, который сочетает в себе текст, графику и действия по одной теме. Самая простая карта нуждается только в <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>

10

Компонент кнопки

Нативные элементы «кнопка» или «а», дополненные стилем Material Design и чернильной рябью, составляют « Кнопки углового материала ». Итак, мы добавим различные кнопки в соответствии с нашим проектом.

<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

Компонент Progressive Bar

Наш компонент Progressive Bar показывает активность и прогресс в виде горизонтального индикатора выполнения. Индикатор выполнения поддерживает четыре режима работы: определенный, неопределенный, буфер и запрос. В этом разделе мы рассмотрим использование неопределенного знака всякий раз, когда пользователю нужно подождать, пока что-то завершится, и нет необходимости указывать, сколько времени это займет.

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

11б

Поле формы/ средство выбора даты

Компонент поля формы — это компонент, который применяет популярные стили текстового поля, такие как подчеркивание, плавающая метка и сообщения-подсказки, к нескольким компонентам 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 Material

Добавьте компоненты углового материала в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

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

Modesto  Bailey

Modesto Bailey

1589640960

Let's implement a Theme Switch like the Angular Material Site

Learn how to implement a Theme Picker from scratch, for your Angular App. This is a beginners guide and you’ll get to know the best practices you should follow along the way.

This article is mainly intended for beginners. I’ve added a TL;DR; below as a precautionary measure, in case you’re a more advanced Angular Developer. Please feel free to navigate to a section that is most interesting to you.

#angular #angular9 #angular-material #material-design #angular-cli