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

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 { }