Assignment #11

    We are going to work on the Menu Component

    Remember we have a menu folder with 4 files in it:

    menu.component.ts  <= the code "behind" the visual part of the component
                            it define the selector => <app-menu>
                            and the HTML Template along with the CSS

    menu.component.html <= the visual part of the component, it will replace the selector <app-menu> tag

    menu.component.css <= the (optional) local CSS rules, we currently have a simple rule to define a background color

    menu.component.spec.ts <= the Jasmine Unit Test file

    ------------------------------------------------------------------------------------------------------------

    We are going to change the menu.component.ts, the menu.component.html and empty the menu.component.css file

    However we need to take a step back, and consider where the menu data is coming from, in our case a REST style Web Service
    so we need to add Http support to the Angular project.

    The src/app/app.module.ts defines the Angular environment for this project, so we need to add a couple of lines:

    import { NgModule } from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    import { HttpClientModule } from '@angular/common/http';        <= we need to add this line to include the HttpClient
                                                                            in the Humor Application Module
    import { AppRoutingModule } from './app-routing.module';
    import { AppComponent } from './app.component';
    import { MenuComponent } from './menu/menu.component';
    import { WelcomeComponent } from './welcome/welcome.component';
    import { MessageComponent } from './message/message.component';
    import { FooterComponent } from './footer/footer.component';
    import { NumberedComponent } from './numbered/numbered.component';
    import { KeyedComponent } from './keyed/keyed.component';
    import { DatedComponent } from './dated/dated.component';

    @NgModule({
      declarations: [
        AppComponent,
        MenuComponent,
        WelcomeComponent,
        MessageComponent,
        FooterComponent,
        NumberedComponent,
        KeyedComponent,
        DatedComponent
      ],
      imports: [
        BrowserModule,
        AppRoutingModule,
        HttpClientModule               <= we need to add this line to make the HttpClient accessible in the components
      ],                                          (make sure you have a comma on the line above)
      providers: [],
      bootstrap: [AppComponent]
    })
    export class AppModule { }


    ------------------------------------------------------------------------------------------

    Now we are going to add code to the menu.component.ts file to call the REST Web Service ngOnInit
     (when the component loads)


    import { Component, OnInit } from '@angular/core';
    import { HttpClient } from '@angular/common/http';         <= notice the import

    @Component({
      selector: 'app-menu',
      templateUrl: './menu.component.html',
      styleUrls: ['./menu.component.css']
    })
    export class MenuComponent implements OnInit {

      data : any = null;

      constructor(private http: HttpClient) { }              <= this is a Constructor Injection
                                                                     Angular will pass the HttpClient Module to this
      ngOnInit(): void {                                             to this component
        this.http
           .get('http://localhost:8080/HumorREST/api/category/list')   <= this is the REST Web Service call in ngOnInit()
           .subscribe(results => {                                          it puts the results into a variable named data
              const dataString = JSON.stringify(results);                   for the HTML (View) to use
              this.data = JSON.parse(dataString).categories;
           });
      }
    }

    ------------------------------------------------------------------------------------------

    Now we edit the menu.component.html file

    <div>
        <div *ngFor="let category of data">                              <= the data field is the one in the component
            <span>{{ category.type + '/' + category.id }}</span> <br />        I am pulling fields out of the JSON object
        </div>                                                               also notice the Angular Directive (built-in html code)
    </div>                                                                   *ngFor -> it will repeat the div tag for each Category
                                                                             in the data field


    ------------------------------------------------------------------------------------------

    finally we edit the menu.component.css file and empty it

    Make sure to save everything, and run: ng serve to see the menu entries


    it is not pretty (yet) but we do have the results from the REST Web Service call