I will stop following the numbers for now. Will just take general important notes.

15.How an Angular App gets Loaded and Started

Iside the src folder, we have a file called index.html:


<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>FirstAngularProUdemy</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>

We are interested in the element called <app-root>.

Now in our app component, there is the app.compoenent.ts file, which has the following things:

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

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

Notice how we have selector: 'app-root' -> this is specifying that the component will be placed into the app-root element inside the index.html root file.

Now, one of the important files is found inside the app component (I am not sure if we should be calling app a component, but whatever).

It is called app.module.ts (other components inside app will not have it).

Lets again consider another file: in our src folder, there is a file called main.ts.

Note that this file specifies stuff such as whether we are in development mode or production mode, etc.

It also imports AppModule from the app.module.ts file we talked about above.

Then it has this line in the end:

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

Which basically Starts our application through the AppModule thing imported from the app.module.ts file found inside app folder. Nice.

17. Creating a new component

Just use ng generate component <component-name> :)

Note: inside the compname.component.ts we will have the selector of the component, which essentially is the element name that should be used when calling the component.

Example, for an automatically generated component called server (generated through the component creation command), the selector would be app-server, and it will be called by its parent component through the following syntax: <app-server></app-server>

The templateUrl property tell us about the html file of the component.

That's it :)

18. Understanding the Role of AppModule and Component Declaration

We will go over Modules later. In essence, there is one important module you'll use, which is AppModule, and it is probably enough for the majority of projects.

Modules help you create packages for you app when it is bundled.

For bigger apps, you might think of using multiple modules, but for now we'll focus on AppModule.

Now: when a new component is created, we should notify something called @NgModule, which is inside the app: app.module.ts file.

The @NgModule has a property called declarations, and it lists the components currently in use in the app.

Angular does not scan the app folder to see new components. We should tell it about new compoents that we add manually. (And we should delete no longer used components from the declarations of @NgModule).

So here is how app.module.ts looks after we've added a component called server:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
//below line is added
import { FormsModule} from '@angular/forms'

import { AppComponent } from './app.component';
import { ServerComponent } from './server/server.component';

@NgModule({
  declarations: [
    AppComponent,
    ServerComponent
  ],
  imports: [
    BrowserModule,
    FormsModule       //this line was added
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Note how we had to import it first before adding to the declarations property.

Note: we don't add the .ts part of the file to the import. It is just the name.

19. Using Custom Components

Shortcut note: try to add an VScode extension called emmet, it well help you create an html element by just writing its name.

So to use a component, just use call it inside the app (or parent) html folder inside an element using its selector name:

<app-server></app-server>

20. Creating Components with the CLI & Nesting Components

Again, create a component through the command not manually: ng generate component <component-name>

or just ng g c <compname>

Note: the automatically generated .spec.ts file is for TESTING. We will cover this later.

Also note: in order to use a component inside another parent component OTHER THAN APP, you don't actually need to import anything.

All the component are visible to all the other components as all of them are part of the app folder, which has the app.module.ts file listing all exiting components in the app.

21. Working with Components Templates

Inline HTML:

So each component has a compname.component.ts file which has an @Component thingy containing templateUrl which specifies the component html file.

However, if the component html file barely has anything, you can shrink down your file usage by putting the contents right there inside the @Component:

Alternatively, you can open back tics which will allow you to make your code look better by adding new lines and stuff:

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

@Component({
  selector: 'app-server',
  template: `
        <app-childcomp1></app-childcomp1>
        <app-childcomp2></app-childcomp2>
`,
  styleUrls: ['./server.component.css']
})
export class ServerComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }
}

Say you have more than three lines of html code inside template - then using an external file is probably a good idea.

Note: unlike selector and styleUrls, the template (or templateUrl) property should always be present. There are stuff that we can use in place of selector, and the styelUrls is not necessary, but the templateUrl (or template) should always be there.

Just like we can write inline html, we can also write inline styles:

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

@Component({
  selector: 'app-server',
  template: `
        <app-childcomp1></app-childcomp1>
        <app-childcomp2></app-childcomp2>
`,
  style: [`
    h3{ color: blue; }
`]
})
export class ServerComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }
}

Note: you can't use templateUrl and template together, it should be only one of them. Same for styles and stylesUrl.

23. Fully Understand the Component Selector

So the selector property in the compname.component.ts file can actually be altered.

Tag Selector

When it is like this:

@Component({
  selector: 'app-server',
    ...

It means that we should create an element with the above selector as a tag, like this:

<app-server></app-server>

Attribute Selector

However, there are other options. Alternatively, we can change the selector to become an html attribute, as such:

@Component({
  selector: '[app-server]',
    ...

The corresponding html would be:

<div app-servers></div>

Class Selector

The last option would be the class selector option:

@Component({
  selector: '.app-servers',
    ...

The corresponding html would be:

<div class='app-servers'></div>

Note: selecting by ID won't work. It's not supported.

GENERALLY: you'll always want it to be an html tag (not an attribute or class). However we might face some use cases where those options are helpful, so it's a note for now.