#

Erstellen eines Angular Material Spinners

 

Ein Angular Material Spinner ist ein Lade-Kreis oder Progress Component, welches während des Ladens von Daten oder einer Webseite angezeigt wird.

In Angular stehen diese Komponenten als @Angular/Material kostenlos zur Verfügung

 

 

 

Component.html

<p>spinner1 works!</p>

 

Mat-Spinner: 

<mat-spinner></mat-spinner>

 

Mat-Progress-Spinner:

<mat-progress-spinner

        class="example-margin"

        [color]="color"

        [mode]="mode"

        [value]="value">

    </mat-progress-spinner>

 

 

 

 

Component.ts

 

import { ComponentOnInit } from '@angular/core';

import {ThemePalettefrom '@angular/material/core';

import {ProgressSpinnerModefrom '@angular/material/progress-spinner';

 

@Component({

  selector: 'app-spinner1',

  templateUrl: './spinner1.component.html',

  styleUrls: ['./spinner1.component.css']

})

export class Spinner1Component implements OnInit {

 

  colorThemePalette = 'primary';

  modeProgressSpinnerMode = 'determinate';

  value = 50;

  

  constructor() { }

 

  ngOnInit(): void {

  }

 

}

 

 

 

 

App.module.ts

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

 

import { AppComponent } from './app.component';

import {MatProgressSpinnerModulefrom '@angular/material/progress-spinner';

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { Spinner1Component } from './components/spinner1/spinner1.component';

 

@NgModule({

  declarations: [

    AppComponent,

    Spinner1Component

  ],

  imports: [

    BrowserModule,

    BrowserAnimationsModule,

    MatProgressSpinnerModule

  ],

  providers: [],

  bootstrap: [AppComponent]

})

export class AppModule { }

 

 

 

 

Solution:

You have to install Angular material with ng add ! in Visual Code -> PowerShell Terminal

 

ng add @angular/material

 

nstallation in VS Code->Terminal

PS D:\Programmierung\Angular\Demo\Demo-Spinner> ng add @angular/material

 

Installing packages for tooling via npm.

Installed packages for tooling via npm.

? Choose a prebuilt theme name, or "custom" for a custom theme: Indigo/Pink

       [ Preview: https://material.angular.io?theme=indigo-pink ]

 

? Set up global Angular Material typography styles? No

? Set up browser animations for Angular Material? Yes

 

UPDATE package.json (1319 bytes)

√ Packages installed successfully.

UPDATE src/app/app.module.ts (628 bytes)

UPDATE angular.json (3747 bytes)

UPDATE src/index.html (556 bytes)

UPDATE src/styles.css (181 bytes)

PS D:\Programmierung\Angular\Demo\Demo-Spinner> ng serve

 

Mobile

.

0123movie.net