Шаги для импорта Angular Material

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

Установить угловой материал

Чтобы настроить проект Angular Material, выполнив следующую команду

ng add @angular/material

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

  • выберите предварительно созданное имя темы или «пользовательское» для пользовательской темы
  • Настройка глобальных стилей типографики Angular Material
  • настроить анимацию браузера для Angular Material

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

В общем, когда вы нажимаете на любой компонент, у него есть три вкладки: Обзор, API и Примеры. Обзор рассказывает о компоненте, например, о чем он, какие методы у него есть. В. На вкладке API есть эталонный API, который мы должны импортировать в наш модуль, этот эталонный API уникален для каждого компонента материала Angular. На вкладке «Пример» есть несколько справочных примеров с кодом TS, кодом HTML и стилем CSS.

Давайте посмотрим на примере компонента Angular Material, как импортировать в приложение реального времени.

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

  • Импортируйте API из компонента Angular Material в модуль приложения по умолчанию или вы можете создать отдельный модуль для всего Angular Material и экспортировать его.

import {MatButtonModule} from '@angular/material/button';

  • В component.html добавьте следующий код
<div class="example-label">Basic</div>
<div class="example-button-row">
<button mat-button>Basic</button>
</div>

Внутри кнопки тег должен добавить атрибут для кнопки, похожей на матовую кнопку, матовую приподнятую кнопку, матовую плоскую кнопку, матовую поглаживающую кнопку, матовую иконку кнопки, матовую потрясающую, матовую. -min-fab. Эти атрибуты будут выполнять определенное действие при добавлении тега кнопки.

Сохраните код с помощью ctl+s и запустите сервер Angular с помощью команды ng serve. Мы знаем, что Angular будет работать на сервере по умолчанию 4200.

Удачного кодирования! 🍃​☕​