Carlos P. Jimeno

jimenocontact@gmail.com
Jimeno0

Carlos P. Jimeno

@Jimeno0

Module 3.

Angluar

@Jimeno0

Intro

  • What is angular
  • Project setup
  • Whrite our first app
  • What is typescript
  • Integrate CSS
  • Custon components
  • Data binding
  • Event binding
  • Directives
@Jimeno0

What is angular

Framework developed by google

@Jimeno0

Installing angular

npm i -g @angular/cli

ng new first-app

cd first-app

ng --open serve

@Jimeno0

Exploring the starter files

@Jimeno0

Exploring the starter files

1. clean html

2. create a tag and consume some attributes

 

@Jimeno0

What is typescript

superset of javascript strongly typed, object oriented, compiled language

@Jimeno0

Integrate external CSS

Integrate bootstrap

npm i bootstrap@3

add css path to `angular.json`

@Jimeno0

Integrate external CSS

Lets change our component to a bootstrap input

@Jimeno0

Create our  first component

Remember to import component in app.module.ts
@Jimeno0

Create our component

via cli: ng generate component navbar

@Jimeno0

Data binding

String interpolation

properties binding

{{text}}

[disabled]='disabled'

@Jimeno0

Data binding

Create a button with name as string interpolation & disabled property binding

@Jimeno0

Event binding

  <input type="text" name="inputName" id="inputId" [(ngModel)]="text">

<button (click)="handleClick()">

Forms

Inputs

@Jimeno0

Event binding



// ...

import { FormsModule } from '@angular/forms';


@NgModule({
// .....
  imports: [
    BrowserModule,
    FormsModule
  ],
// ....

We need to add the Forms module to handle inputs

@Jimeno0

Event binding

1. Create an input and a button component

2. Handle events

  • Input changes
  • Button disabled if there is no text
  • Button event to clean input
@Jimeno0

Directives

Attr directives: changes the appearance and behavior of the DOM

Structural directives: responsible for HTML layout 

@Jimeno0

Structural Directives

*ngFor

<div *ngFor="let movie of movies" class="row">

@Jimeno0

Structural Directives

*ngIf

<div 
     *ngIf="condition; else elseBlock"
     >
  Content to render when condition is true.
</div>
<ng-template
             #elseBlock
             >
  Content to render when condition is false.
</ng-template>
@Jimeno0

Structural Directives

Exercise:

1. render our infamous movies list

2. conditional rendering of the drama films

@Jimeno0

Add children components

Define <ng-content> where we want our childrens to render

@Jimeno0

Exercise

In movies component:

1. Define navbar to be able to receive childrens

2. Set two inputs inside navbar

3. filter movies results by inputs

@Jimeno0

Pass properties down

use @Input() decorator to consume 

  @Input() value;

@Jimeno0

Exercise

Use a <app-card > component that receive the props

@Jimeno0

Pass properties to the parent

use @Output() decorator  & event Emitter to tell the parent when the values its changed

 @Output()
  change = new EventEmitter();
@Jimeno0

Pass properties to the parent

Then emit the event

  increment() {
    this.count++;
    this.change.emit(this.count);
  }
@Jimeno0

Pass properties to the parent

Pass the callback to the component prop

      <counter
        [count]="myCount"
        (change)="countChange($event)">
      </counter>
@Jimeno0

Exercise

In movies component:

1. Define navbar to be able to receive childrens

2. Set two inputs inside navbar

3. filter movies results by inputs

@Jimeno0

Routes

@NgModule({
  imports: [
// ........
// 
    RouterModule.forRoot([
      { path: '', component: SomeCompontent },
      { path: 'about', component: AboutComponent },
    ])
  ],
@Jimeno0

Routes

<router-outlet></router-outlet>

Where does the routes renders?

Devacademy fullstack angular

By Carlos Pérez Jimeno

Made with Slides.com

Devacademy fullstack angular

  • 91
Loading comments...

More from Carlos Pérez Jimeno