angular basics & components

Currently enrolled in Udemy’s- the complete guide to angular 2. Notes from Lesson 1 and 2

Link to Assignment 2 - Databinding

How Does an Angular App Get Loaded and Started? (Lecture 13)

• Import main module (app.module.ts) into main.ts
• In the app module, bootstrap the component (app.component.ts)
• Import styling in component.

Component Selectors (Lecture 14)

• There are many ways you can create and use component selectors.

Element Selector

# app.component.ts

@Component({
    selector: 'app-component'
})

# app.component.html

<app-component></app-component>

Attribute Selector

• can use any html element
• in the angular component, the selector is denoted by the []
• in the html, the selector is preceeded by a html element

# app.component.ts

@Component({
    selector: '[app-component]'
})

# app.component.html

<div app-component></div>

Class Selector

• in the angular component, the selector is denoted by the .
• in the html, the selector is preceeded by the html class tag

# app.component.ts

@Component({
    selector: '.app-component'
})

# app.component.html

<div class="app-component"></div>