Jumping into ng2 with Angular CLI

by @esperancaJS

These are the steps followed during the talk in case you try to follow along or want to redo them at home

1. Install

install node
install Angular CLI

npm install -g @angular/cli

2. Start and launch the project in local development

ng new quick-app
cd quick-app
ng serve

Open: http://localhost:4200

3. Create Pages Components

ng g component about
ng g component home
ng g component todo-list

4. Create Routes

Create Routes File app.routes.ts

import { Routes } from '@angular/router';

import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
import { TodoListComponent } from './todo-list/todo-list.component';

export const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  { path: 'todo-list', component: TodoListComponent },
  { path: '**',   redirectTo: '', pathMatch: 'full' }
];

Import Route Files in app.module.ts

(...)
import { RouterModule } from '@angular/router';

import { routes } from './app.routes';
(...)
  imports: [
    (...)
    RouterModule.forRoot(routes)
  ],
(...)

Insert the router outlet in app.component.html
```
<router-outlet></router-outlet>
```

Also add a navigation bar to app.component.html

 <nav>
   <a routerLink="/">Home</a>
   <a routerLink="/about">About</a>
   <a routerLink="/todo-list">Todo List</a>
 </nav>

5. Push to Github pages

Create a new Github repository

Link local repo with Github

git add --all
git commit -m "getting started"
git remote add origin https://github.com/USERNAME/PROJECT_NAME.git
git push origin master

Deploy to Github pages

npm i -g angular-cli-ghpages
ng build --prod --base-href "https://USERNAME.github.io/PROJECT_NAME/"
cp dist/index.html dist/404.html
ngh

Then you can see your project at https://USERNAME.github.io/PROJECT_NAME

6. Create the Todo List Page

Create a list in todo-list.component.ts:

 export class TodoListComponent implements OnInit {
 
   list: Array<any> = [
     { name: 'clean room', done: false },
     { name: 'make pancakes', done: false },
     { name: 'spend 3 hours on reddit', done: true }
   ];
 
 (...)

Show it in the HTML in todo-list.component.html

 <ul>
   <li *ngFor="let task of list">
     <input type="checkbox" [(ngModel)]="task.done"/>
     {{task.name}}
   </li>
 </ul>

Allow adding new TODOs

Create newTask string in todo-list.component.ts:

  export class TodoListComponent implements OnInit {
  
  	newTask: String = '';

  (...)

Create an addTask Function in todo-list.component.ts:

  (...)
    ngOnInit() {
    }
  
    addTask(){
      this.list.push({
        name: this.newTask,
        done: false
      });

      this.newTask = '';
    }
 (...)

Create the Add Task HTML in todo-list.component.html

  <form>
    <input [(ngModel)]="newTask" name="newTask"/>
    <button (click)="addTask()" type="submit">Add Task</button>
  </form>

7. Convert the Todo List Page into Component Architecture

Generate the new components

ng g component todo-list/todo-item
ng g component todo-list/todo-adder

Build the todo-item

The HTML in todo-list/todo-item/todo-item.component.html:

<input type="checkbox" [(ngModel)]="task.done"/>
{{task.name}}

Allow importing the task in todo-list/todo-item/todo-item.component.ts:

 (..)
 export class TodoItemComponent implements OnInit {
 
   @Input() task;
 (...)

Replace in todo/list/todo-list.component.html:

 <input type="checkbox" [(ngModel)]="task.done"/>
 {{task.name}}

with

 <app-todo-item [task]="task"></app-todo-item>

Build the todo-adder

The HTML in todo-list/todo-adder/todo-adder.component.html:

 <form>
   <input [(ngModel)]="newTask" name="newTask"/>
   <button (click)="addTask_()" type="submit">Add Task</button>
 </form>

Create an event emitter to output the new task to the parent and respective logic and variables:

 export class TodoAdderComponent implements OnInit {
 
   newTask: String = '';
 
   @Output() addTask = new EventEmitter();
 
   constructor() { }
 
   ngOnInit() {
   }
 
   addTask_(){
     this.addTask.emit(this.newTask);
     this.newTask = '';
   }
 
 }

Replace in todo/list/todo-list.component.html:

 <form>
   <input [(ngModel)]="newTask" name="newTask"/>
   <button (click)="addTask()" type="submit">Add Task</button>
 </form>

with

 <app-todo-adder (addTask)="addTask($event)"></app-todo-adder>

Update the addTask function in todo-list.component.ts to:

   addTask(newTask){
     this.list.push({
       name: newTask,
       done: false
     });
   }

Bonus: Import Bootstrap 4

With NPM

npm install ng2-bootstrap bootstrap@next --save

Add it to angular-cli.json

"styles": [
  "styles.css",
  "../node_modules/bootstrap/dist/css/bootstrap.min.css"
],

Update the navbar in app.component.html to use bootstrap classes

Replace:

  <nav class="test">
    <a routerLink="/">Home</a>
    <a routerLink="/about">About</a>
    <a routerLink="/todo-list">Todo List</a>
  </nav>

- With: 

	```
	<nav>
	  <ul class="nav nav-pills">
	    <li class="nav-item">
	      <a 
	        class="nav-link" 
	        routerLinkActive="active" 
	        routerLink="/"
	        [routerLinkActiveOptions]="{exact: true}"
	      >Home</a>
	    </li>
	    <li class="nav-item">
	      <a 
	        class="nav-link" 
	        routerLinkActive="active" 
	        routerLink="/about"
	      >About</a>
	    </li>
	    <li class="nav-item">
	      <a 
	        class="nav-link" 
	        routerLinkActive="active" 
	        routerLink="/todo-list"
	      >Todo List</a>
	    </li>
	  </ul>
	</nav>
	```

Thanks for coming!

@esperancaJS

esperancaJS/Getting Started with Angular CLI.md