Aufbau einer Angular-Komponente

Klasse

                     
                        import { Component } from '@angular/core';

                        @Component({
                          selector: 'app-root',
                          templateUrl: './app.component.html',
                          styleUrls: ['./app.component.css']
                        })
                        export class AppComponent {
                          title = 'Hallo Welt';
                        }
                     
                 

Metadaten

• mit Decoratorn (Annotations)
• diese sind einfache Funktionen @Component()
• Konfiguration als Objekt mit properties
• { selector: 'blubb'}

@Component

• muss zwingend vorhanden sein
• statt einer templateUrl kann auch ein Template Inline mit Backtips ` verwendet werden

                     
                        @Component({
                            selector: 'app-root',
                            styles: [`.h1 {
                                font-size: 1.2 rem;
                            }`]
                            template: `
Ich bin ein Titel
`
                        })
                        export class AppComponent {}
                     
                 

Aufgabe 4.1

• Baue die bestehende Komponente auf Inline um
• Nutze ein inline Template mit einer H1-Überschrift
• Style die Überschrift in einer schönen Farbe, z.B. #FF00FF
• Denke an die Backticks und die Propertynamen

Mögliche Lösung

                     
                        import {Component} from '@angular/core';

                        @Component({
                            selector: 'app-root',
                            template: `
{{title}}
`,
                            styles: [`h1 {color: #FF00FF;}`]
                        })
                        export class AppComponent {
                            title = 'Schöner Titel';
                        }