Angular Academy · Lektion

Egna direktiv

Skapa och tillämpa egna direktiv för att förbättra användargränssnittet.

Lektion 1 av 310 steg

Egna direktiv är en gratis lektion i Angular Academy på CoddyKit. Detta är lektion 1 av 3. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för Angular Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Angular Academy innehåller totalt 3 lektioner.

Anpassade direktiv i Angular

Direktiv låter dig utöka HTML. I den här lektionen introduceras anpassade direktiv och hur du kan skapa egna.

Vad är ett direktiv?

Direktiv ändrar utseendet på eller beteendet hos DOM-element. Angular tillhandahåller inbyggda direktiv som *ngIf och *ngFor.

Typer av direktiv

Komponentdirektiv
Attributdirektiv - ändrar utseendet på eller beteendet
Strukturdirektiv - ändrar layouten, till exempel *ngIf

Skapa ett attributdirektiv

Skapa ett direktiv med Angular CLI:

ng generate directive highlight

ng generate directive highlight

Tillämpa direktivet

Använd direktivet som ett attribut i mallen:

<p appHighlight>Highlighted Text</p>

<p appHighlight>Highlighted Text</p>

Direktivets logik

Direktiv innehåller logik som ändrar DOM-element. Du kan till exempel ange bakgrundsfärgen dynamiskt.

constructor(private el: ElementRef) {
  this.el.nativeElement.style.backgroundColor = 'yellow';
}

@HostListener-dekorator

Använd @HostListener för att reagera på händelser på element med ditt direktiv:

@HostListener('mouseenter') onMouseEnter() {
  this.highlight('blue');
}

@Input() i direktiv

@Input() låter dig skicka data till direktiv från mallar:

@Input() defaultColor: string;

Sammanfattning

Du har lärt dig att skapa och använda anpassade direktiv för att förbättra dina Angular-appar. Bra jobbat!

Gratis att börja

Lär dig HTML med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 38
Lektioner: 144

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Egna direktiv” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen Angular Academy, inklusive ”Egna direktiv”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i Angular Academy innehåller totalt 3 lektioner.

Vad lär jag mig i ”Egna direktiv”?

Skapa och tillämpa egna direktiv för att förbättra användargränssnittet. Ni övar på Angular Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig Angular Academy?

Du behöver inga förkunskaper. Utbildningen i Angular Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 1 av 3.

Hur lång tid tar lektionen ”Egna direktiv”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här Angular Academy-lektionen?

Ja. Varje Angular Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

← Tillbaka till Angular Academy