O Angular Material e o Angular Component Development Kit (CDK) simplificam significativamente o processo de desenvolvimento e aprimoramento de aplicativos Angular com o Material Design. Ao utilizar uma série de esquemas fornecidos por essas bibliotecas, os desenvolvedores podem agilizar a integração de vários componentes do Material Design em seus projetos. Aqui está um guia sobre como começar a usar essas ferramentas poderosas.
Instalação de Esquemas
Esquemas são scripts poderosos incluídos em ambos @angular/cdk e @angular/material pacotes. Depois de instalados, esses esquemas podem ser executados por meio do Angular CLI para automatizar o processo de configuração e configuração, garantindo uma incorporação tranquila do Material Design em seus projetos.
-
Para instalar Angular Material, CDK e Angular Animations , use o seguinte comando CLI. Este comando não apenas instala os pacotes necessários, mas também executa configurações essenciais do projeto:
ng add @angular/material -
Para instalar apenas o Angular CDK , se você deseja aproveitar os componentes avançados sem o conjunto completo do Material Design, execute:
ng add @angular/cdk
Configuração automática com ng add @angular/material
Correndo ng add @angular/material faz mais do que apenas adicionar dependências. Ele configura seu projeto para adotar o Material Design ao:
- Adicionando dependências necessárias ao
package.json. - Possibilitando
BrowserAnimationsModule. - Incorporando um tema de Material Design pré-construído ou personalizado.
- Incluindo fontes Roboto e fontes Material Icon em seu projeto.
- Aplicar estilos globais alinhados aos princípios do Material Design.
Geração Rápida de Componentes
Além da configuração básica, Angular Material e CDK oferecem um conjunto de esquemas para gerar componentes pré-configurados com Material Design:
- Formulário de Endereço : Gera um formulário para captura de endereços de entrega.
- Navegação : cria um componente com navegação lateral e barra de ferramentas responsivas.
- Dashboard : Produz um layout com cartões e menus de materiais.
- Tabela : configura uma tabela de dados com recursos de classificação e paginação.
- Árvore : visualiza uma estrutura de pastas aninhadas.
O Angular CDK estende essa funcionalidade com esquemas como arrastar e soltar , permitindo que os desenvolvedores criem componentes interativos com facilidade.
Gerando Componentes com Esquemas
Para gerar um componente usando esses esquemas, os comandos Angular CLI seguem um padrão simples:
ng generate @angular/material:<schematic-name> <component-name>
Por exemplo, para gerar um componente de navegação, você executaria:
ng generate @angular/material:navigation my-navigation
Conclusão
O Angular Material e os esquemas Angular CDK oferecem um recurso inestimável para desenvolvedores que buscam integrar o Material Design de forma rápida e eficiente em seus aplicativos Angular. Ao automatizar o processo de instalação e configuração e fornecer modelos para componentes de UI comuns, essas ferramentas ajudam a criar interfaces de usuário visualmente atraentes e funcionais com o mínimo de esforço.
Esteja você criando um projeto pequeno ou um aplicativo empresarial de grande porte, aproveitar o Angular Material e os esquemas CDK pode acelerar significativamente o desenvolvimento e garantir um design consistente e fácil de usar em todo o seu aplicativo.
