setup of an angular component

the class

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

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

                     
                 

metadata

• with Decorators (Annotations)
• those are simple functions @Component()
• configuration object with properties as param
• { selector: 'blubb'}

@Component

• is mandatory
• instead of an external template with templateUrl, an inline Template with backticks ` can be used

                     
                        @Component({
                            selector: 'app-root',
                            styles: [`h1 {
                                font-size: 1.2 rem;
                            }`],
                            template: `
I am a title
`
                        })
                        export class AppComponent {}
                     
                 

Task 4.1

• Change the existing app.component to show your name, use a bal-tag element
• Add it to the template (app.component.html) where "Your application content" is mentioned
• Design System Docs for Tag
• Remember the backticks and the property names

Possible solution

                     
                        
                          

                            
                          
                          

                            John Kerry
                            Hello World!
                            Button