Kategori: Angular

1>> In the app-routing.module.ts file add a paramter to a route using colon and paramter, in the example below, the id:

const routes: Routes = [
  { path: 'ShowItem/:id', component: ShowItemComponent }
];

2>> In the component where this id is to be utilized, impoty ActivatedRoute from @angular/router:

import {ActivatedRoute} from "@angular/router";

3>> In the constructor of this same class, subscribe to the route.params and start working with the parameter, in this case the id:

 constructor(private route: ActivatedRoute) { 
                this.route.params.subscribe( params => {
                          console.log("- got params.id: " + params.id);
                           this.itemId = params.id 
                });
              }

  itemId: number;
  

* * *

A good example can be found at:

https://codecraft.tv/courses/angular/routing/parameterised-routes/

In the component where you will be receiving the value, include in your component ts file the variable with the @Input annotation — with in the class:

  
  @Input()
  item_id: number;

Then, in the component where you are working with the HTML, include the name of the receiving component with the [variable]=”value” parameter:

<div style="border:1px solid green">

    <app-logic10-base-ingredients [item_id]="item.id"></app-logic10-base-ingredients>
</div>

7 Steps are required to go from a URL holding a JSON result to the final presentation of results in an Angular component:

1>> have the JSON object, eg. localhost:8080/items/meenu_number/1

2>>Have a TypeScript interface that represents the object, eg. IItem


3>> Write the service class (eg. item.service.ts) with the observable on an http.get

import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { Injectable } from '@angular/core';

import { IItem } from './item';

@Injectable({
    providedIn: 'root'
})
export class ItemService {
    private itemUrl = 'http://localhost:8080/items/menu_number/1';

    constructor(private http: HttpClient) { }

    getItem(): Observable<IItem> {
        console.log("link is: " + this.itemUrl);
        return this.http.get<IItem>(this.itemUrl);
    }
}

4>> Subscribe to the observable in the component and save it to a local variable. You can subscribe on the ngOnInit function of the component:

import { Component, OnInit } from '@angular/core';

import { ItemService } from './item.service';
import { IItem } from './item'

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

  constructor(private itemService: ItemService) { }

  item: IItem;

  ngOnInit(): void {
    console.log("ngOnInit accessed...");
    this.itemService.getItem().subscribe({
      next: gotItem => {
        this.item = gotItem[0];
        console.log("- got item: " + JSON.stringify(gotItem));
        console.log("- item menu number:" + gotItem[0].menu_number)   
        
      },
      error: err => console.log("error: " + err.error)
    })
  }

}

5>> Include the Http module in app.module.ts both as an import and in the imports section as HttpClientModule

//...
import { HttpClientModule } from '@angular/common/http'; 
//...

@NgModule({
  declarations: [
    AppComponent,
    ShowItemComponent,
    Logic10BaseIngredientsComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

6>> Enable Cross Origins on your server app, eg. the Node.js app:

app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});

7>> Include the object in the template file of your component

<div style="border:1px solid green">

    <ng-container *ngIf="item">
        <p>show-item component works!</p>
        {{ item.menu_number}} . {{ item.name }} <br>
        {{ item.description }}
    
    </ng-container>

    <app-logic10-base-ingredients></app-logic10-base-ingredients>
</div>

To include a component in another component use the component’s selector in your new component

If I have a component that has a selector “app-logic10-base-ingredients”, I can include it in my “show-item” component.

To include it, write so in the html file of the “show-item” component:

<div style="border:1px solid green">

    <p>show-item component works!</p>
    <app-logic10-base-ingredients></app-logic10-base-ingredients>
</div>

The app.component.ts is the root as the application loads:

app.component.ts
app.component.spec.ts
app.component.html
app.component.css

The app.component.ts would have content like:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'angularpizzeria';
}

and the HTML template (app.component.html) can have links to various parts in the component as well as “router-outlet” where a component can be loaded:

App component
<p></p>

<nav>
  <ul>
    <li><a routerLink="/ShowItem" routerLinkActive="active">ShowItem</a></li>
  </ul>
</nav>

<router-outlet></router-outlet>

1>> To have a router work in Angular, create a component xyz via:

ng g c xyz

Now the following files become available:
– xyz.component.css
– xyz.component.html
– xyz.component.ts
– xyz.component.spec.ts

2>> In app-routing.module.ts, import the component at the top of the page, then include the path to the component in the routes variable:

import { XyzComponent } from './xyz/xyz.component';

const routes: Routes = [
  {path:"xyz", component:XyzComponent}
];

3>> In the app.component.html file, have the <a> link with a routerLink and routerLinkActive attribute. Then have the tag <router-outlet>:

<a routerLink="/xyz" routerLinkActive="active">Link 1</a>

<router-outlet></router-outlet>