Getting started with Angular

Getting started

To use Angular you must install the current NodeJS (https://nodejs.org/en/download/).

Once installed, run the following command to install Angular globally:

npm install -g @angular/cli

ng is the Angular command line tool, you can use this command to work with Angular.

To generate a new Angular app run the following command:

ng new <app-name>

Select if you would like to add Angular routing and which stylesheet format would you like to use.

To start the app, run the following command while being in the root folder of the project:

npm start

Internally, that command will run ng serve command.

Also, when trying to run an app downloaded from GitHub, it might necessary to install its packages, you can do that by opening a terminal at the root of the project and running the following command:

npm install

Angular app structure

Inside your index.html file you will see that there is an <app-root> tag. That references the component inside /src/app/app.component.html app.component.ts has the logic of this component, and the app.component.html is what is visualized, that means:

TypeScript (TS file): the data model HTML file: the view

Inside the app.component.ts we have the following:

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

• selector: 'app-root' identifies the name of the component from which can be referenced (that is the tag inside index.html is referencing to).
• templateUrl: './app-component.html' references the path to the view.
• styleUrls: ['./app.component.css'] is a list that references all the styles used for the view.

Retrieve variables

To pass data, use brackets with a property, then you can refer to variables inside the component class:

<input class="demo" [value]="data.title">

<img width="300" alt="Angular Logo" [src]="iconUrl">