Primeiros Passos Com A interface Do Usuário Do Angular Material

Angular Material é uma biblioteca de componentes de interface do usuário (UI) que os desenvolvedores usam em seus projetos Angular em termos de acelerar o processo de desenvolvimento para uma interface de usuário elegante e compatível. Ele oferece aos desenvolvedores componentes de interface do usuário funcionais e elegantes, como entradas, tabelas de dados, cartões e muito mais. Seus componentes ajudam a criar aplicativos/páginas da Web funcionais, compatíveis e cativantes e sites responsivos em relação à durabilidade, versatilidade e qualidade do design.

Por que a interface do usuário de material angular?

Vamos examinar a importância do Angular Material em nossos projetos para entender melhor por que ele é essencial para a estrutura Angular.

• Seus componentes são projetados para que um site possa se ajustar a qualquer tamanho de tela.
• Integra-se facilmente com Projetos Angular porque é construído com estrutura Angular.
• Ele pode ser incorporado com o aplicativo Angular novo ou existente, independentemente da versão.
• Ele fornece ferramentas para desenvolvedores construirem/personalizarem seus componentes.
• Ele acelera o processo de desenvolvimento de construção de componentes de interface do usuário do zero.

Abaixo estão alguns recursos do Angular Material:

• Angular Material consiste em CSS padrão.
• É um navegador multiplataforma e pode ser usado para criar um componente reutilizável.
• Possui design responsivo integrado.
• Ele inclui a versão mais recente dos componentes da interface do usuário: botões, caixas de seleção e campo de formulário, moldados para seguir os conceitos do Angular Material Design.
• Ele fornece recursos especializados e avançados, como barra de ferramentas, furto, navegação lateral, cartões, discagem rápida e muitos outros recursos interessantes.

Alternativas à IU de Material Angular

Quando falamos de alternativas, estamos falando de outras bibliotecas de componentes de interface do usuário que podemos usar no lugar do Angular Material. A seguir estão alternativas possíveis e viáveis.

O Ignite UI for Angular é uma coleção abrangente de widgets de interface do usuário baseados em material, componentes, kits de interface do usuário e diretivas de acompanhamento para o Angular que permite aos programadores criar os aplicativos mais avançados e de alto desempenho para navegadores contemporâneos, experiências móveis e PWAs.

Bootstrap é uma biblioteca de código aberto que oferece alguns widgets Angular nativos feitos com Bootstrap 4 CSS. Como você provavelmente já sabe, um dos frameworks CSS mais populares, o Bootstrap, é usado para criar aplicativos elegantes e contemporâneos. Inclui bibliotecas para HTML, CSS e JavaScript. No entanto, “ng-bootstrap” nos fornece o método ideal para usar em nossos aplicativos Angular sem nenhum arquivo JS. Anteriormente, para usar estruturas de Bootstrap no aplicativo Angular, teríamos que empregar CSS de bootstrap e seus arquivos JavaScript.

PrimeNG Uma biblioteca de componentes de interface do usuário alternativa criada por PrimeFaces. Ele fornece uma variedade de temas pré-criados e elementos de interface do usuário para apresentação de dados, entradas de formulário, menus, gráficos, sobreposições e outros usos. O PrimeNG oferece uma ampla variedade de componentes, incluindo tabelas de dados, menus suspensos, seleções múltiplas, mensagens de notificação, acordeões, trilhas de navegação e outros componentes de entrada que atenderiam à maioria dos requisitos de interface do usuário do seu aplicativo. Portanto, não seria necessário incluir bibliotecas distintas para vários requisitos de interface do usuário.

Inicie nosso projeto

Para iniciantes que não usaram o Angular antes ou é a primeira vez que experimentam o framework antes de começarmos a criar nosso projeto, precisamos configurar nosso ambiente e para isso precisamos instalar a CLI usando o gerenciador de pacotes npm com o seguinte comando.

npm install -g @angular/cli

Feito isso, passamos para a criação/construção do nosso projeto. n/b: só precisamos executar o comando uma vez. Depois disso, podemos começar a criar nossos projetos. Execute ng new my-appna linha de comando, substituindo my-apppelo nome do seu aplicativo.

Selecione Ypara roteamento.

Selecione CSSpara estilos.

Depois de tudo isso, execute o seguinte comando:

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

Selecione Ypara continuar.

O ng addcomando instalará o Angular Material , o Component Dev Kit (CDK) e o Angular Animations . Além disso, você deve escolher qualquer um dos temas pré-criados ou personalizados conforme necessário.

Clique Enterpara selecionar seu tema.

Selecione Ypara Tipografia de material angular.

Selecione Ypara Animações.

E nosso pacote de material angular está totalmente instalado. Vamos passar para o nosso projeto e criar algum conteúdo.

Vamos remover tudo em nosso, app.component.htmlexceto <router-outlet></router-outlet>porque o conteúdo do material é gerado automaticamente pelo Angular, e vamos alterá-lo.

Reprodução de sessão de código aberto

O OpenReplay é um conjunto de reprodução de sessão de código aberto que permite ver o que os usuários fazem em seu aplicativo da Web, ajudando você a solucionar problemas mais rapidamente. O OpenReplay é auto-hospedado para controle total sobre seus dados.

Comece a aproveitar sua experiência de depuração - comece a usar o OpenReplay gratuitamente .

Crie nosso conteúdo

Para usar os componentes Angular Material no aplicativo, precisamos importar os componentes individuais no arquivo app.module.ts file. Digamos que queremos exibir o girador Progresso em nosso aplicativo; tudo o que precisamos fazer é importar o componente MatProgressSpinnerModule para o nosso app.module.tsabaixo:

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

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

Para aplicativos maiores, você deve criar um arquivo separado; digamos material.module.ts, e importe todos os componentes individuais, depois importe o módulo de material para app.module.ts. Isso ajuda nosso código a ser DRY (“Don't Repeat Yourself”), especialmente quando precisamos de mais de um componente Angular Material. Adicione a <mat-spinner>tag app.component.htmlabaixo:

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

Depois disso, execute seu servidor de desenvolvimento local:

ng serve

Gerar Componente de Material

Vamos criar alguns componentes.

Um componente da barra de ferramentas

Um componente da Barra de Ferramentas é um local onde cabeçalhos, títulos ou ações podem ser colocados. Na maioria das vezes, uma barra de ferramentas com apenas uma linha e o título do programa serão adicionados ao topo do seu aplicativo. Vamos criar um componente de cabeçalho da barra de ferramentas para nosso projeto.

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

Um componente de cartão

A cardé um contêiner para conteúdo que mistura texto, gráficos e atividades em torno de um único tema. <mat-card>O cartão mais simples precisa apenas de um elemento cheio de conteúdo . Nosso Componente Card terá um título e subtítulo, uma imagem, um parágrafo e uma descrição.

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

Um componente de botão

Elementos “botão” ou “a” nativos suplementados com estilo de design de material e ondulações de tinta são o que constitui “ botões de material angular ”. Então vamos adicionar variedades de botões para se adequar ao nosso projeto.

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

Um componente de barra progressiva

Nosso componente de barra progressiva mostra a atividade e o progresso como uma barra de progresso horizontal. A barra de progresso suporta quatro modos de operação: determinado, indeterminado, buffer e consulta. Nesta seção, consideraremos o uso do sinal indeterminado sempre que o usuário precisar esperar enquanto algo é concluído, e não é necessário especificar quanto tempo levará.

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

Um campo de formulário/ selecionador de data

O Form Field Component é um componente que aplica estilos populares de campo de texto, como sublinhado, rótulo flutuante e mensagens de dica, a vários componentes de material angular. Ao mesmo tempo, o Datepicker consiste em uma entrada de texto e um pop-up de calendário unidos pela propriedade Datepicker da entrada de texto.

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

Juntando tudo

Depois de muita explicação, vamos combinar tudo o que discutimos em nosso artigo para produzir algo significativo aos olhos.

Gerar um componente

Gerar um componente usando Angular CLI

• Correng generate component home
• Configure as rotas em nossa pasta pessoal; substitua as rotas vazias app.routing.module.tspor:

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: '**', redirectTo: '/', pathMatch: 'full'}
];

Esses procedimentos criarão um componente chamado Homee o definirão como a página inicial. Corre ng servepara compilar o app e ver o textoHome Works!

Adicionar componentes de material angular

Adicionar componentes de material angular ahome.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>

Adicionar estilos básicos

Adicionaremos estilos CSS FlexBox básicos para criar espaçamento em nossa página inicial. Você pode encontrar o código na página do Github .

Conclusão

Com a ajuda do Angular Material , conseguimos construir uma página web interativa, como podemos ver acima. Isso nos diz que os desenvolvedores podem criar projetos rápidos que sejam atraentes, responsivos e intuitivos aos olhos dos usuários em todos os espaços de desenvolvimento. Para nosso código-fonte, clique no link do Github .

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

#angular #material 

What is GEEK

Buddha Community

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

Primeiros Passos Com A interface Do Usuário Do Angular Material

Angular Material é uma biblioteca de componentes de interface do usuário (UI) que os desenvolvedores usam em seus projetos Angular em termos de acelerar o processo de desenvolvimento para uma interface de usuário elegante e compatível. Ele oferece aos desenvolvedores componentes de interface do usuário funcionais e elegantes, como entradas, tabelas de dados, cartões e muito mais. Seus componentes ajudam a criar aplicativos/páginas da Web funcionais, compatíveis e cativantes e sites responsivos em relação à durabilidade, versatilidade e qualidade do design.

Por que a interface do usuário de material angular?

Vamos examinar a importância do Angular Material em nossos projetos para entender melhor por que ele é essencial para a estrutura Angular.

• Seus componentes são projetados para que um site possa se ajustar a qualquer tamanho de tela.
• Integra-se facilmente com Projetos Angular porque é construído com estrutura Angular.
• Ele pode ser incorporado com o aplicativo Angular novo ou existente, independentemente da versão.
• Ele fornece ferramentas para desenvolvedores construirem/personalizarem seus componentes.
• Ele acelera o processo de desenvolvimento de construção de componentes de interface do usuário do zero.

Abaixo estão alguns recursos do Angular Material:

• Angular Material consiste em CSS padrão.
• É um navegador multiplataforma e pode ser usado para criar um componente reutilizável.
• Possui design responsivo integrado.
• Ele inclui a versão mais recente dos componentes da interface do usuário: botões, caixas de seleção e campo de formulário, moldados para seguir os conceitos do Angular Material Design.
• Ele fornece recursos especializados e avançados, como barra de ferramentas, furto, navegação lateral, cartões, discagem rápida e muitos outros recursos interessantes.

Alternativas à IU de Material Angular

Quando falamos de alternativas, estamos falando de outras bibliotecas de componentes de interface do usuário que podemos usar no lugar do Angular Material. A seguir estão alternativas possíveis e viáveis.

O Ignite UI for Angular é uma coleção abrangente de widgets de interface do usuário baseados em material, componentes, kits de interface do usuário e diretivas de acompanhamento para o Angular que permite aos programadores criar os aplicativos mais avançados e de alto desempenho para navegadores contemporâneos, experiências móveis e PWAs.

Bootstrap é uma biblioteca de código aberto que oferece alguns widgets Angular nativos feitos com Bootstrap 4 CSS. Como você provavelmente já sabe, um dos frameworks CSS mais populares, o Bootstrap, é usado para criar aplicativos elegantes e contemporâneos. Inclui bibliotecas para HTML, CSS e JavaScript. No entanto, “ng-bootstrap” nos fornece o método ideal para usar em nossos aplicativos Angular sem nenhum arquivo JS. Anteriormente, para usar estruturas de Bootstrap no aplicativo Angular, teríamos que empregar CSS de bootstrap e seus arquivos JavaScript.

PrimeNG Uma biblioteca de componentes de interface do usuário alternativa criada por PrimeFaces. Ele fornece uma variedade de temas pré-criados e elementos de interface do usuário para apresentação de dados, entradas de formulário, menus, gráficos, sobreposições e outros usos. O PrimeNG oferece uma ampla variedade de componentes, incluindo tabelas de dados, menus suspensos, seleções múltiplas, mensagens de notificação, acordeões, trilhas de navegação e outros componentes de entrada que atenderiam à maioria dos requisitos de interface do usuário do seu aplicativo. Portanto, não seria necessário incluir bibliotecas distintas para vários requisitos de interface do usuário.

Inicie nosso projeto

Para iniciantes que não usaram o Angular antes ou é a primeira vez que experimentam o framework antes de começarmos a criar nosso projeto, precisamos configurar nosso ambiente e para isso precisamos instalar a CLI usando o gerenciador de pacotes npm com o seguinte comando.

npm install -g @angular/cli

Feito isso, passamos para a criação/construção do nosso projeto. n/b: só precisamos executar o comando uma vez. Depois disso, podemos começar a criar nossos projetos. Execute ng new my-appna linha de comando, substituindo my-apppelo nome do seu aplicativo.

Selecione Ypara roteamento.

Selecione CSSpara estilos.

Depois de tudo isso, execute o seguinte comando:

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

Selecione Ypara continuar.

O ng addcomando instalará o Angular Material , o Component Dev Kit (CDK) e o Angular Animations . Além disso, você deve escolher qualquer um dos temas pré-criados ou personalizados conforme necessário.

Clique Enterpara selecionar seu tema.

Selecione Ypara Tipografia de material angular.

Selecione Ypara Animações.

E nosso pacote de material angular está totalmente instalado. Vamos passar para o nosso projeto e criar algum conteúdo.

Vamos remover tudo em nosso, app.component.htmlexceto <router-outlet></router-outlet>porque o conteúdo do material é gerado automaticamente pelo Angular, e vamos alterá-lo.

Reprodução de sessão de código aberto

O OpenReplay é um conjunto de reprodução de sessão de código aberto que permite ver o que os usuários fazem em seu aplicativo da Web, ajudando você a solucionar problemas mais rapidamente. O OpenReplay é auto-hospedado para controle total sobre seus dados.

Comece a aproveitar sua experiência de depuração - comece a usar o OpenReplay gratuitamente .

Crie nosso conteúdo

Para usar os componentes Angular Material no aplicativo, precisamos importar os componentes individuais no arquivo app.module.ts file. Digamos que queremos exibir o girador Progresso em nosso aplicativo; tudo o que precisamos fazer é importar o componente MatProgressSpinnerModule para o nosso app.module.tsabaixo:

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

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

Para aplicativos maiores, você deve criar um arquivo separado; digamos material.module.ts, e importe todos os componentes individuais, depois importe o módulo de material para app.module.ts. Isso ajuda nosso código a ser DRY (“Don't Repeat Yourself”), especialmente quando precisamos de mais de um componente Angular Material. Adicione a <mat-spinner>tag app.component.htmlabaixo:

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

Depois disso, execute seu servidor de desenvolvimento local:

ng serve

Gerar Componente de Material

Vamos criar alguns componentes.

Um componente da barra de ferramentas

Um componente da Barra de Ferramentas é um local onde cabeçalhos, títulos ou ações podem ser colocados. Na maioria das vezes, uma barra de ferramentas com apenas uma linha e o título do programa serão adicionados ao topo do seu aplicativo. Vamos criar um componente de cabeçalho da barra de ferramentas para nosso projeto.

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

Um componente de cartão

A cardé um contêiner para conteúdo que mistura texto, gráficos e atividades em torno de um único tema. <mat-card>O cartão mais simples precisa apenas de um elemento cheio de conteúdo . Nosso Componente Card terá um título e subtítulo, uma imagem, um parágrafo e uma descrição.

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

Um componente de botão

Elementos “botão” ou “a” nativos suplementados com estilo de design de material e ondulações de tinta são o que constitui “ botões de material angular ”. Então vamos adicionar variedades de botões para se adequar ao nosso projeto.

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

Um componente de barra progressiva

Nosso componente de barra progressiva mostra a atividade e o progresso como uma barra de progresso horizontal. A barra de progresso suporta quatro modos de operação: determinado, indeterminado, buffer e consulta. Nesta seção, consideraremos o uso do sinal indeterminado sempre que o usuário precisar esperar enquanto algo é concluído, e não é necessário especificar quanto tempo levará.

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

Um campo de formulário/ selecionador de data

O Form Field Component é um componente que aplica estilos populares de campo de texto, como sublinhado, rótulo flutuante e mensagens de dica, a vários componentes de material angular. Ao mesmo tempo, o Datepicker consiste em uma entrada de texto e um pop-up de calendário unidos pela propriedade Datepicker da entrada de texto.

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

Juntando tudo

Depois de muita explicação, vamos combinar tudo o que discutimos em nosso artigo para produzir algo significativo aos olhos.

Gerar um componente

Gerar um componente usando Angular CLI

• Correng generate component home
• Configure as rotas em nossa pasta pessoal; substitua as rotas vazias app.routing.module.tspor:

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: '**', redirectTo: '/', pathMatch: 'full'}
];

Esses procedimentos criarão um componente chamado Homee o definirão como a página inicial. Corre ng servepara compilar o app e ver o textoHome Works!

Adicionar componentes de material angular

Adicionar componentes de material angular ahome.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>

Adicionar estilos básicos

Adicionaremos estilos CSS FlexBox básicos para criar espaçamento em nossa página inicial. Você pode encontrar o código na página do Github .

Conclusão

Com a ajuda do Angular Material , conseguimos construir uma página web interativa, como podemos ver acima. Isso nos diz que os desenvolvedores podem criar projetos rápidos que sejam atraentes, responsivos e intuitivos aos olhos dos usuários em todos os espaços de desenvolvimento. Para nosso código-fonte, clique no link do Github .

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

#angular #material 

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

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

· 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

• After running this command, it will prompt you to select from various options about the CSS and other functionalities.

• To leave everything to default, simply press the Enter or the Return key.

#angular tutorials #angular cli install #angular environment setup #angular version check #download angular #install angular #install angular cli

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

#angular #javascript #tech blogs #user interface (ui) #angular #angular fundamentals #angular tutorial #basics of angular

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