angular-10-notes/Angular_notes_ep_16.txt at main · arctutorials/angular-10-notes · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
Episode #16 - Templates in Angular components

1. whenever we generate a component
    - 4 files
        - template file ( .html )
        - style.scss ( stylesheet)
        - class (component.ts file )
        - spec ( unit test file)

2. This is totally based on the choice at installing Angular app
    - if you selected scss
    - if you selected css
        style.css

3. <comp_name>.component.html
    - It works!

4. <comp_name>.component.ts file

5. Decorator it gives definitinion and meaning to the
    @ - it has prefix of @

6. by default Angular will add "app" as prefix
    - selector -> "app-leads-listing"
    - unique identifier to identify this component
    - <app-leads-listing>

        -> Can you change the default "app" prefix?
            -> YES - we can change it throughout the app
                -> "app" -> "arc-tutorials"
                -> angular.json -> change prefix
        -> what will happen if i change?
            -? Nothing happenns. Only thing you change, make sure you update with latest info
        -> will your app work or will it crash?
            -> If you have updated the necessary components with latest prefix

7. Templates in Components

    - Two ways of using templates in Components
        - templateUrl
            - link the html file

        - template

    - templateUrl
        -> is always 1 single html file

    - template
        -> we will pass the template itself instead of a html file
        -> we just the HTML code that we want the component to display
        -> we will use "backtick" and NOT single quote
            backtick key can be found on left top side `
8. stylesURL
    -> is an array
    -> it can take multple stylesheets as input
    -> it can be one or more stylesheets

9. Hands-on examples
    Profile -> Modules
        list-profile -> component