The complete book on angular 11 - Chapter 1 Writing Your First Angular Web Application

Chapter 1: Writing Your First Angular Web Application

1. To get help, go to community chat room:

https://newline.co/discord/ng-book

https://github.com/srdeleon/angular-reddit ?

2.

To get started with Angular, you’ll need to have Node.js installed.

The Node Package Manager (npm for short) is installed as a part of Node.js.

To check, run

npm -v

Once you have Node.js setup, the next step is to install TypeScript.

npm install -g typescript

tsc -v

Install Angular CLI:

npm install -g @angular/cli

Once it’s installed you’ll be able to run it from the command line using the ng

command.

ng help

3.

ng new angular-hello-world

ng serve/ng serve --port 9001

ng will look at the file angular.json to find the entry point to our app.

angular.json specifies a "main" file, which in this case is main.ts

main.ts is the entry-point for our app and it bootstraps our application

We use the AppModule to bootstrap the app. AppModule is specified in src/app/app.module.ts

AppModule specifies which component to use as the top-level component. In this case it is AppComponent

4.

ng generate component hello-world

Using backticks `` for multiline strings makes it easy to put templates inside your code files.

5.

<ul>

    <li *ngFor="let name of names">Hello {{ name }}</li>

</ul>

6.

@Input() name: string | undefined;

<ul>

    <li *ngFor="let individualUserName of names">

        <app-user-item [name]="individualUserName"></app-user-item>

    </li>

</ul>

7.

ng new angular-reddit

Notice that in the input tags we used the # (hash) to tell Angular to assign those tags

to a local variable. By adding the #newtitle and #newlink to the appropriate <input/> elements, we can pass 

them as variables into the addArticle() function on the button!

console.log(`Adding article title: ${title.value} and link: ${link.value}`);

8.

@HostBinding('attr.class') cssClass = 'row';

9.

JavaScript, by default, propagates the click event to all the parent components.

Because the click event is propagated to parents, our browser is trying to follow the

empty link, which tells the browser to reload.

To fix that, we need to make the click event handler to return false

10.

The votes parameter is optional (denoted by

the ? at the end of the name) and defaults to zero.

    constructor(title: string,link: string, votes?: number){

        this.title = title;

        this.link = link;

        this.votes = votes || 0;

    }

11.

ng build --prod -> deprecated and removed

ng build --configuration production