Simple Wizard Stepper für Ihre Angular Web Apps

Blog

Simple Wizard Stepper für Ihre Angular Web Apps

Eine Reihe von Webkomponenten, die Sie in Angular erstellen können, ohne dass Sie dafür eine ganze Bibliothek importieren müssen. In diesem Beitrag erstelle ich einen einfachen Wizard-Stepper für Ihre Angular Web Apps und PWAs (Progressive Web Apps), indem Sie einfach Vanilla-Angular-Komponenten und -Dienste verwenden, um Ihre Ansichten zu konsolidieren und gleichzeitig großartige Benutzererfahrungen zu bieten.



Bild für Beitrag

_Abhängigkeiten: _ Winkel-CLI



Lassen Sie uns selbst eine coole, einfache und flexible Wizard-Stepper-Komponente in Angular bauen, während wir gleichzeitig einige wichtige Konzepte lernen über:

  • Gekapselte, entkoppelte Komponenten schaffen, die nahtlos miteinander kommunizieren
  • Verwenden von Diensten, um die Kommunikation zwischen Komponenten zu ermöglichen
  • Verwendung der Flexbox-Modell die Komponenten flexibel und reaktionsschnell zu stylen

Lasst uns beginnen!



Das Projekt erstellen

Fahren Sie fort und erstellen Sie das Projekt über die Angular-CLI mit dem Befehl

ng new simple-wizard-stepper

Auswählen JAWOHL beim Hinzufügen von Angular Routing und wählen Sie SCSS als Ihr Stylesheet-Format an den Eingabeaufforderungen während der Projekterstellung.

Ich werde einen Slick verwenden Google-Schriftart für dieses Projekt und ich werde auch einige verwenden Materialsymbole für Web, indem Sie von einem CDN aus darauf verweisen. Platzieren Sie die unten stehenden Links innerhalb des Tag des Projekts index.html . Wir zeigen später, wie man sie verwendet.

Die Hauptfunktionen Ihrer App index.html sollte so aussehen:

Angular

An der Wurzel des Projekts, im Inneren der src/app Ordner erstellen, werde ich mehrere Verzeichnisse für eine bessere Projektstruktur erstellen. Ich erstelle Verzeichnisse namens Komponenten, Modelle, Seiten und Dienstleistungen . Ihre Struktur sollte wie folgt aussehen (von der src Wurzel):

- src - app - components - models - pages - services

#observables #angular #flexbox #services #behavioursubject

itnext.io

Simple Wizard Stepper für Ihre Angular Web Apps

Eine Reihe von Webkomponenten, die Sie in Angular erstellen können, ohne dass Sie dafür eine ganze Bibliothek importieren müssen. In diesem Beitrag erstelle ich einen einfachen Wizard-Stepper für Ihre Angular Web Apps und PWAs (Progressive Web Apps), indem Sie einfach Vanilla-Angular-Komponenten und -Dienste verwenden, um Ihre Ansichten zu konsolidieren und gleichzeitig großartige Benutzererfahrungen zu bieten.