Ab Mai 2018 wird ein Cookie-Banner Pflicht. Wer diesen jetzt schon bei sich anzeigen möchte, kann auf die Cookie-Law Komponente für Angular 2+ zurückgreifen. Damit kann extrem einfach ein Cookie-Banner erzeugt, gestaltet und angezeigt werden. Wer noch den passenden Text (und weitere Hintergrundinfos) benötigt, kann sich bei e-recht24.de schlau machen.
Schlagwort: Komponente
An den Anfang der Seite/Komponente springen
Das Laden von Komponenten in SPAs hat sehr viele Vorteile. Einer der wenigen Nachteile ist allerdings, dass man standardmässig nicht mehr an den Anfang der Seite springt, wenn man einen Link anklickt.
Mit einem einfachen Event-Subscriber direkt auf der Root-Komponente kann man dem allerdings entgegenwirken:
export class AppComponent implements OnInit, OnDestroy{
private routerEventSubscriber: Subscription;
constructor(private router: Router) {}
ngOnInit() {
this.routerEventSubscriber = this.router.events.subscribe((evt) => {
if (!(evt instanceof NavigationEnd)) {
return;
}
window.scrollTo(0, 0)
});
}
ngOnDestroy() {
this.routerEventSubscriber.unsubscribe();
}
}
Key-Events auf HTML-Elementen
Wenn man auf ein Div (oder anderen HTML-Element) ein keydown-Event (z.B. (keydown.enter)) legen möchte, muss der TabIndex >= 0 sein:
<div (keydown.enter)="myEvent()" tabindex="1" > ... </div>
Neue Komponente anlegen
Zum Anlegen neuer Komponenten empfiehlt es sich auf die angular cli zurückzugreifen.
Mit dem Befehl
ng generate component <NAME>
wird die Komponente in einem neuen Ordner angelegt, inkl. aller notwendiger Dateien (.ts, .html, .css und .spec.ts).
Zusätzlich wird die Komponente automatisch im Modul (app.module.ts) importiert und damit automatisch anderen Komponenten zur Verfügung gestellt.
Die Befehle (generate, component, …) können auch abgekürzt werden:
generate => g
component => c
Wer keinen extra Unterordner und sowohl das CSS als auch das Template inline erstellen möchte, kann auf folgenden Befehl zurück greifen:
ng g c —flat —inline-style —inline-template
—flat => kein Unterodner
—inline-style (Abkürzung: -is) => inline CSS
—inline-template (Abkürzung: -it) => inline Template