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 { Component, OnInit } from '@angular/core'; import {ThemePalette} from '@angular/material/core'; import {ProgressSpinnerMode} from '@angular/material/progress-spinner';
@Component({ selector: 'app-spinner1', templateUrl: './spinner1.component.html', styleUrls: ['./spinner1.component.css'] }) export class Spinner1Component implements OnInit {
color: ThemePalette = 'primary'; mode: ProgressSpinnerMode = '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 {MatProgressSpinnerModule} from '@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 |