Шаги для импорта 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.
Удачного кодирования! 🍃☕