Components

Wat zijn components?

  • In plaats vaan één lange HTML-pagina te schrijven, ga je de pagina opsplitsen in kleine, eventueel herbruikbare, componenten met hun eigen logica. Hierdoor blijft de code overzichtelijk en makkelijk te onderhouden.
  • Hoe je een pagina opdeelt in componenten bepaal je uiteindelijk zelf.
  • Sommige componenten zijn gemeenschappelijk voor de volledige site. Denk hierbij aan de navigatiebalk en de voetnoot. Andere componenten gebruik je dan weer op één of meerdere pagina's. Bijvoorbeeld een filterveld of een detail-component.
  • De root-component (<app-root>) is de basis van waaruit je de volledige applicatie opbouwt. Hier ga je nieuwe componenten en/of sub-componenten toevoegen.
  • Elke component bestaat minimaal uit een HTML-template (front end) en een ts-bestand (business logic).
  • Optioneel heeft een component nog een eigen CSS-bestand (lay-out) en spec-bestand (unittesten).
    Unittesten komt in deze cursus niet aan bod.

Structuur van een component.

In deze video wordt de component manueel aangemaakt. Deze techniek gaan wij niet gebruiken. De CLI gaat voor ons de componenten genereren. Toch zijn er enkele basisbegrippen die we uit deze video moeten onthouden.

  • Het is perfect mogelijk om op de indexpagina gemeenschappelijke componenten, zoals een navigatiebalk en een voetnoot, toe te voegen, toch is dit geen gebruikelijke techniek.
  • Gemeenschappelijke componenten voeg je best toe aan het root-bestand app/app.component.html
  • Plaats elke component in een eigen map. Geef de map dezelfde naam als de component. Plaats ook het woord component achter de naam. (Later bespreken we nog andere types zoals pipes, services, enz, ...). Met deze conventie blijft de structuur heel overzichtelijk.
    Voor een navigatiebalk kies je bijvoorbeeld volgende structuur:
    • app/nav/nav.component.css
    • app/nav/nav.component.html
    • app/nav/nav.component.spec.ts
    • app/nav/nav.component.ts
  • Een component is op zich niet meer dan een klasse.
    De decorator (@Component) bepaalt dat deze klasse een component is.
  • Een decorator staat ALTIJD NET VOOR de klasse.
  • De component-decorator bevat minimaal een selector en een templateUrl of template.
    De styleUrls of style is optioneel.

Een component importeren en integreren.

  • Een component aanmaken is niet voldoende.
  • Voor je een component kan gebruiken , moet je de component in app/app.module.ts importeren en aan de declaration-array van de NgModule-decorator toevoegen.
  • Pas nu is de component gekend door Angular en kan je hem in de HTML-tamplate van een andere component integreren.

Component genereren met de CLI.


            

                
                

                    
Gebruik je de CLI om een component aan te maken, dan gebeurt de import in
                        app/app.module.ts automatisch.

                

            

        

        

            

            

        

    


    

        

            
Externe vs. inline HTML-template (verplicht).

            
    
                
  • templateUrl: URL naar extern HTML-bestand.
    • 
                
  • template: inline HTML-code. Gebruik backticks als je de code over meerdere lijnen
                    schrijft.
                
    • 
            

            
Externe vs. inline CSS-code (optioneel).

            
    
                
  • styleUrls: een array van URLs naar één of meerdere externe CSS-bestanden.
    • 
                
  • styles: inline CSS-code. Gebruik ook hier backticks als je de code over meerdere
                    lijnen schrijft.
                
    • 
                
  • De stijlen die je hier definieert, GELDEN ENKEL voor deze component. Stel: de globale
                    tekstkleur voor een p-tag is groen, maar enkel voor deze component is de kleur rood. Dan
                    herdefinieer je de p-tag hier.
                
    • 
            

            

                
                

                    
Heb je geen extra CSS nodig, dan mag je styleUrls/styles uit de decorator
                        verwijderen.

                

            

        

        

            

            

        

    


    

        

            
Component selectors

            
Elke component MOET natuurlijk een unieke selector hebben. Naast het standaard type
                (element-selector), kan je ook nog kiezen voor een attribute-selector of voor een class-selector.

            
    
                
  • selector: 'app-abc': element-selector of tag-selector.
    
                    In HTML te gebruiken als:
                    <app-abc></app-abc>
                
    • 
                
  • selector: '[app-abc]': attribute-selector.
    
                    In HTML te gebruiken als:
                    <div app-abc></div>
                
    • 
                
  • selector: '.app-abc': class-selector.
    
                    In HTML te gebruiken als:
                    <div class="app-abc"></div>
                
    •