Cos'è il materiale angolare e come implementarlo?

Questo articolo ti illustrerà i fondamenti di Angular Material e la procedura per installare e implementare vari componenti UI / UX in Angular.

I componenti UI / UX in Angular sono noti come Materiali angolari. Essiaiutare le applicazioni angolari a eseguire in modo efficiente . Tuttavia, se non ne sei ancora a conoscenza, ecco un articolo per aiutarti a imparare i materiali angolari in dettaglio. Inoltre, tPer acquisire una conoscenza approfondita di Angular, valuta la possibilità di iscriverti a ' di Edureka.

In questo articolo, tratterò i seguenti argomenti:





Introduzione ai materiali angolari

Materiali sono stati introdotti come linguaggio di progettazione sviluppato da Google nel 2014. Material Design è uno strumentoper framework front-end, che ti aiuta con visivo , movimento , e interazione design. Ti aiuta anche ad adattarti a diversi dispositivi e diverse dimensioni dello schermo. Innanzitutto, è stato taggato su AngularJS per rendere queste app di più attraente ed eseguire Più veloce . Quindi, Google ha riscritto completamente il codice da zero e ha rimosso JS i.e. e lo chiamò a settembre 2016. Successivamente, Google ha etichettato il Material Design in Angular, che utilizza e lo chiamò Angular Materials.



Logo materiale angolare - Materiale angolare - Edureka

Materiali angolari o i componenti dell'interfaccia utente (UI) ti aiutano a progettare la tua applicazione in un file strutturato maniera. Attirano gli utenti e ce la fanno più facile accesso gli elementi oi componenti presenti nella tua applicazione. Aiutano anche a progettare le tue applicazioni in modo accattivante, con caratteristiche uniche stili e forme . Questi componenti aiutano a migliorare la tua applicazione coerente , veloce , versatile e anche il design reattivo siti web.



Installazione angolare del materiale

Ora, iniziamo con un breve tutorial su come installare Angular Materials. Per prima cosa, assicurati di avere Angular installato nel tuo sistema. Se non hai familiarità con Angular, fai riferimento al link su . Dopo aver impostato tutto, puoi aggiungere materiali angolari al tuo progetto utilizzando il seguente comando:

di aggiungere @ angolare / materiale

Innanzitutto, ti chiederà di scegliere un nome tema predefinito o un tema personalizzato.

È necessario scegliere il tema predefinito 'Indigo / Pink', che è il tema predefinito per lo stile dell'applicazione. Puoi anche scegliere il tema 'Personalizzato' in modo da poter personalizzare i file del tema che includono tutti gli stili comuni.

Successivamente, ti chiederà di configurare HammerJS . HammerJS è una libreria popolare, utilizzata principalmente nell'applicazione Angular. Aggiunge il supporto per i gesti tattili come Swipe, Pan, Pinch, Rotate e molti altri, specialmente nelle applicazioni mobili.

Puoi scegliere 'Sì' o 'No'. HammerJS può essere utile quando usi la tua applicazione sui cellulari. Poiché i cellulari offrono display touch, questi gesti sono più utili e possono sembrare alla moda nella tua applicazione mobile.

Dopo aver scelto la tua scelta, ti verrà chiesto di configurare Animazioni del browser per materiale angolare.

Devi scegliere 'Sì' in modo da poter utilizzare le animazioni sulla tua applicazione. Le animazioni angolari rendono la tua applicazione più divertente e facile da usare. Ciò può migliorare la tua app e l'esperienza utente che attira l'attenzione degli utenti.

Successivamente, questo installerà Angular Materials nella tua applicazione.

Componenti angolari in materiale

Come accennato in precedenza, i componenti angolari del materiale non sono altro che UI / UX Componenti di design. Contengono una vasta gamma di componenti come controlli modulo, navigazione, pulsanti e indicatori, popup e molti altri. Questi componenti consentono di implementare modelli in base alle specifiche di Material Design.

Andando avanti, vediamo alcuni esempi di come implementare questi componenti nella tua applicazione Angular.

Navigazione

Innanzitutto, discuterò i componenti in Navigazione.

  • Barra degli strumenti

È necessario digitare il codice seguente nel file app.component.html file per utilizzare il componente Toolbar nella tua applicazione.

 Tutorial materiale angolare 

è un contenitore di materiale angolare utilizzato per intestazioni e titoli. Il colore del container può essere modificato utilizzando il colore proprietà.Per impostazione predefinita, le barre degli strumenti utilizzano un colore di sfondo neutro basato sul tema corrente, ovvero chiaro o scuro.Puoi scegliere tre temi predefiniti che sono: 'primario' , 'accento' , o 'avvisare' .Per utilizzare questa barra degli strumenti, devi prima importarla in app.module.ts file da materiali angolari utilizzando il seguente comando:

importa {MatToolbarModule} da '@ angular / material'

Successivamente, è necessario aggiungere anche questo modulo nel file importazioni: [] sezione situata nel file app.module.ts file.

importa: [BrowserModule, AppRoutingModule, BrowserAnimationsModule, MatToolbarModule],

Per Mat-Toolbar, è necessario aggiungere ' MatToolbarModule '.

Ora serviamo il tuo progetto utilizzando il seguente comando:

di servire -o

Questo aprirà il tuo progetto sul browser predefinito del tuo sistema come mostrato di seguito:

Se desideri cambiare il colore della barra degli strumenti secondo la tua scelta, puoi farlo con l'aiuto del foglio di stile CSS. Lascia che ti mostri un esempio.

Per prima cosa, devi cancellare colore proprietà da container e quindi digitare quanto segue CSS codice in app.component.css file.

mat-toolbar {background-color: / * color-of-your-choice * / color: / * text-color * /}

Ora servi il tuo progetto per vedere il risultato.

  • Menù

Successivamente, parlerò del componente Menu. Devi digitare il seguente codice nel tuo file app.component.html file.

 Tutorial sui materiali angolari Guida alle impostazioni dei menu

Aggiungiamo un po 'di stile al Menù pulsante. Devi digitare il seguente codice nel tuo file app.component.css file.

.space {flex: 1 1 auto} .btns {width: 100px height: 40px font-size: large border-radius: 10px border: 3px solid # 113c89 background-color: lightcoral}

class = 'space' viene utilizzato per aggiungere la spaziatura tra 'Nome barra degli strumenti' e 'Opzione di menu'.

Nel caso in cui non hai familiarità con il foglio di stile CSS, puoi fare riferimento al nostro blog su per approfondire.

Proprio come Toolbar, da usare e contenitori, è necessario seguire la stessa procedura di cui sopra, per importare MatMenuModule e MatButtonModule a partire dal materiale angolare e aggiungili importazioni: [] sezione situata in app.module.ts file.

Servi il tuo progetto ora per visualizzare l'output.

Controlli del modulo

Ora discuterò i componenti in Controllo modulo.

  • Campo modulo

Come suggerisce il nome, Form-Field viene utilizzato per gli input forniti dall'utente. È più comunemente usato per la registrazione di un utente, in un'applicazione o in un sito web.

È necessario digitare il codice seguente nel file app.component.html file per utilizzare il componente Campo modulo nell'applicazione.

 

Controlli del modulo

Nome

Come al solito, devi importare MatFormFieldModule e MatInputModule e aggiungili importazioni: [] sezione situata nel file app.module.ts file. Il codice di cui sopra viene generalmente utilizzato per inserire nomi come 'Nome', 'Cognome', ecc. Puoi anche utilizzare i Validatori e rendere obbligatorio un campo. Ad esempio, puoi usarlo per il campo E-mail. Puoi nascondere o mostrare il testo per le password. Come riferimento, controlla il codice qui sotto:

Inserisci la tua email {{getErrorMessage ()}} Inserisci la tua password {{hide? 'visibilità_off': 'visibilità'}}

Nella tua app.component.css file, è necessario aggiungere il seguente codice:

.example-container {padding-left: 50px}

Ora, nel tuo app.component.ts file, è necessario importare FormControl e Validatori a partire dal @ angolare / forme directory.

importa {FormControl, Validators} da '@ angular / forms'

Devi anche aggiungere il testo per visualizzare un errore all'interno della classe seguente.

export class AppComponent {email = new FormControl ('', [Validators.required, Validators.email]) getErrorMessage () {return this.email.hasError ('required')? 'Devi inserire un valore': this.email.hasError ('email')? 'Not a valid email': ''} hide = true}

Facendo riferimento alla procedura precedente, è necessario digitare il codice seguente nel file app.module.ts file per importare i moduli necessari.

importa {FormsModule, ReactiveFormsModule} da '@ angular / forms' importa {MatIconModule} da '@ angular / material'

Successivamente, è necessario aggiungere questi moduli in importazioni: [] sezione.

  • Pulsante radio

I pulsanti di opzione sono generalmente utilizzati per scegliere una scelta tra le diverse opzioni. Puoi controllare il seguente codice come riferimento.

Per app.component.html file,

 

Genere

Maschio femmina

Per app.component.css file,

mat-radio-button {Padding-left: 50px}

Ora devi importare MatRadioModule e aggiungilo importazioni: [] sezione situata nel file app.module.ts file.

Successivamente, è necessario servire il progetto per visualizzare l'output.

Andando avanti, parlerò di Angular Material CDK.

Materiale angolare CDK

CDK, noto anche come Component Dev Kit , è una libreria di comportamenti predefiniti in Angular Material, che è un insieme di strumenti che implementano comuni modelli di interazione e caratteristiche dell'applicazione . Non ha uno stile specifico per Material Design. Vediamo un esempio di CDK.

  • Campo di testo

Il componente Campo di testo fornisce utilità per lavorare con i campi di input di testo. È possibile utilizzare i componenti CDK nel campo di testo per ridimensionare gli input. Vediamo un esempio di come implementarlo.

Per app.component.html file,

 

Materiale angolare CDK

Dimensione carattere 10px 12px 14px 16px 18px 20px Ridimensiona automaticamente l'area di testo

Per il app.component.ts file, è necessario importare prima i componenti necessari.

importa {CdkTextareaAutosize} da '@ angular / cdk / text-field' importa {NgZone, ViewChild} da '@ angular / core' import {take} da 'rxjs / operators'

Ora, devi digitare il seguente codice all'interno della classe.

come inizializzare un oggetto in python
export class AppComponent {constructor (private _ngZone: NgZone) {} @ViewChild ('autosize', {static: false}) autosize: CdkTextareaAutosize triggerResize () {this._ngZone.onStable.pipe (take (1)) .subscribe (( ) = & ampampampgt this.autosize.resizeToFitContent (true))}}

Successivamente, devi importare MatSelectModule e aggiungilo importazioni: [] sezione situata nel file app.module.ts file.

Infine, devi servire il tuo progetto per visualizzare l'output.

Questa non è la conclusione e ci sono molti altri componenti in Angular Materials. Puoi fare riferimento a loro dal Sito ufficiale di materiale angolare.

Con questo vorrei chiudere il mio blog. Spero che tu sia chiaro sui fondamenti di Angular Material.Se hai dubbi o domande su questo articolo, non esitare a pubblicarli nella sezione commenti qui sotto.

Se desideri imparare tutto ciò che hai appena imparato da questo blog e altro ancora Angolare e indirizza la tua carriera verso uno sviluppatore angolare esperto, quindi considera la possibilità di iscriverti al nostro ' .

Hai domande per noi? Per favore, menzionalo nella sezione commenti di questo blog 'Angular Material' e ti risponderemo il prima possibile.