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