angular-notes/use_an_api.md

Using an API with AJAX

Lesson Objectives

1. Create a new app
2. Generate a new component
3. Clean up app.component.html
4. Add search component to app
5. Add Form HTML to search component
6. Import Form functionality into the app
7. Use ngModel to set a component property to the value of an input

Create a new app

ng new starwars
cd starwars
ng serve --open

Generate a new component

ng generate component search

Clean up app.component.html

Set src/app/app.component.html contents to:

<h1>Star Wars Character Search App</h1>

Add search component to app

Edit src/app/app.component.html:

<h1>Star Wars Character Search App</h1>
<app-search></app-search>

Add Form HTML to search component

Edit src/app/search/search.component.html:

<section>
    <h2>Search For A Star Wars Character</h2>
    <input type="text" placeholder="Character Name"/>
    <input type="submit" value="Search"/>
</section>

Import Form functionality into the app

Edit src/app/app.module.ts to import FormsModule and place it as an import:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { SearchComponent } from './search/search.component';

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

@NgModule({
    declarations: [
        AppComponent,
        SearchComponent
    ],
    imports: [
        BrowserModule,
        FormsModule //add it as an import
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

Use ngModel to set a component property to the value of an input