Questions[angular5]

Can you help me how I compare two numbers in Angular. Taking into account that the minimum value must be less than the maximum value. I have the idea how to compare them, but I don't know how to get the values ​​entered by the user or if there is any way with *ngIf to be able to compare.

onSubmit() {
  this.enviado = true;
  this.comparador();
}

public comparador() {
  // this.comp.testCall();
  console.log('ingreso ');
  if (this.tipoValoracion_ValMaximo >= this.tipoValoracion_ValMinimo) {
    console.log('ingreso al if');
    this.Save();
  } else {
    console.log('ingreso al else');
    alert('El valor maximo debe ser mayor al valor minimo cree nuevamente el tipo de valoracion');
  }
}

<div class="form-group">
  <label for="name">VALOR MINIMO:</label>
  <input type="number" class="form-control" id="tipoValoracion_ValMinimo" [(ngModel)]="tipoValoracion.tipoValoracion_ValMinimo" name="tipoValoracion_ValMinimo" pInputText pKeyFilter="int" placeholder="Valor Minimo" maxlength="3" title="COLOCAR VALOR MINIMO"
    autocomplete="off" min="0" fromControlName="valminimo" required maxlength="150" #valminimocontrol="ngModel">
</div>
<div class="form-group">
  <label for="name">VALOR MAXIMO:</label>
  <input type="number" class="form-control" id="tipoValoracion_ValMaximo" required [(ngModel)]="tipoValoracion.tipoValoracion_ValMaximo" name="tipoValoracion_ValMaximo" pInputText pKeyFilter="int" placeholder="Integers" placeholder="Valor Maximo" maxlength="3"
    title="COLOCAR VALOR MAXIMO" autocomplete="off" min="0" fromControlName="valmaximo" required maxlength="150" #valmaximocontrol="ngModel">
</div>

Hello, my problem is that I need to print a sublist that goes in a trseparate area below the one trwhere I loop (in the ng-container), but once outside of that tr(where I loop) iit no longer recognizes it. Any ideas?. Thank you very much

<table class="procedures-table__grid">
    <caption class="sr-only"><h3>Select next procedure</h3></caption>
    <thead class="procedures-table__grid__header">
      <tr>
        <th id="procedure_procedure" class="">Trámite</th>
        <th id="procedure_regulatory-reform" class="">Reforma normativa</th>
        <th id="procedure_options" class=""></th>
      </tr>
    </thead>
    <tbody>
      <tr [indicator] = i *ngFor="let procedure of tableListProcedures, index as i">
        <td headers="procedure-procedure">
          <button (click)="openCloseTab(i);" class="">
            {{procedure.procedureName}}
          </button>
          <!-- <i class="adriano-arrow-down" attr.aria-hidden=""></i> -->
        </td>
        <td headers="procedure_regulatory-reform">
          <a (click)="goReformProcedure();" href="#" class="">
            {{procedure.regulatory_reform_Procedure}}
          </a>
        </td>
      </tr>
      <ng-container *ngIf="i">

      </ng-container>
    </tbody>
  </table

I am new to Angular, to explain myself properly I am going to start from an example.
When we have the Firebase library installed in our project, we can call the information from the Users table as follows:

constructor(db:AngularFirestore){
db.collection('Users').valueChanges().subscribe((data: User[]) => {
  this.users= data;
  console.log(this.users);
 });
}

The valueChanges() method is responsible for listening to any changes in the database and updating them in the user view without the need to refresh it (this is when making a manual change on a certain field in the same Firebase database).

So, how can this result be achieved, if for example I am consuming an API Rest? If when making a direct change in the database, this change is reflected in the user's view without the need to refresh.

// users.service.ts
get():Observable<any>{
   return this.httpClient.get(this.API_ENDPOINT+'/users_location');
}

// user.component.ts
users: Users[]=[];
constructor(private userService: UsersService) {
   this.getTrailers();
}

getUsers(){
  this.userService.get().subscribe( (data:Users[])=>{
    this.users= data;
  });
}

In principle I want to tell you that I tried several ways but they did not work. It is an application that uses the Spotify backend, and for this I have a service which handles the requests so that I can use them in my component and extract data from the artist, which works within a specific component. Now, once I navigate from one page to another that data obviously "flies" as the component is recreated. To solve this I decided to create another service which saves the JSON data in objects. I really don't know what I'm doing wrong though as I keep getting them as "undefened" in my other component. Although the data in the service is persistent... Thank you very much in advance!

// artist.service.ts

import { OnInit, Injectable } from '@angular/core';
import { SpotifyService } from './spotify.service';
import { ActivatedRoute } from '@angular/router';

@Injectable()
export class ArtistService implements OnInit {

    artist: any = {};
    tracks: any = [];
    albums: any = [];
    artistRel: any = {};

    constructor(private _spotify: SpotifyService, public route: ActivatedRoute) {}

    ngOnInit() {
        this.route.params.map(params => params['id'])
      .subscribe(id => {
        this._spotify.getArtista(id)
          .subscribe(artist => {
            console.log(artist, 'Artista');
            this.artist = artist;
          });
        this._spotify.getTop(id)
            .map( (resp: any) => resp.tracks)
              .subscribe( tracks => {
                console.log(tracks, 'Pistas');
                this.tracks = tracks;
          });
        this._spotify.getAlbumsArtist(id)
            .map( (resp: any) => resp.items)
              .subscribe( albums => {
                console.log(albums, 'Albums');
                this.albums = albums;
          });
        this._spotify.getRelatedArtists(id)
            .map( (resp:any) => resp)
              .subscribe( related => {
                console.log(related, 'Artistas relacionados');
                this.artistRel = related;
          });
      });
    }
}

    // artist.component.ts

    import { Component, OnInit } from '@angular/core'; 
    import { ActivatedRoute, Data } from '@angular/router'; 
    import { ArtistService } from '../../services/artist.service';

    @Component({   
      selector: 'app-artist',   
      templateUrl: './artist.component.html' })

   export class ArtistComponent implements OnInit {

      artist: any = {};


      constructor(private route: ActivatedRoute, public _artist: ArtistService){}

      ngOnInit() {
        this.artist = this._artist.artist;  } }

I am trying to useangular-material

<mat-menu #menu="matMenu">
  <button mat-menu-item>
    <mat-icon>dialpad</mat-icon>
    <span>Redial</span>
  </button>
  <button mat-menu-item disabled>
    <mat-icon>voicemail</mat-icon>
    <span>Check voicemail</span>
  </button>
  <button mat-menu-item>
    <mat-icon>notifications_off</mat-icon>
    <span>Disable alerts</span>
  </button>
</mat-menu>

But I get error:

There is no directive with "exportAs" set to "matMenu"

The versions of my project:

  __ _  _ __    __ _  _   _ | |  __ _  _ __         ___ | |(_)
 / _` || '_ \  / _` || | | || | / _` || '__|_____  / __|| || |
| (_| || | | || (_| || |_| || || (_| || |  |_____|| (__ | || |
 \__,_||_| |_| \__, | \__,_||_| \__,_||_|          \___||_||_|
               |___/
angular-cli: 1.0.0-beta.28.3
node: 6.11.4
os: win32 x64
@angular/animations: 5.2.3
@angular/cdk: 5.1.1
@angular/common: 5.2.3
@angular/compiler: 5.2.3
@angular/core: 5.2.3
@angular/forms: 5.2.3
@angular/http: 5.2.3
@angular/material: 5.1.1
@angular/platform-browser: 5.2.3
@angular/platform-browser-dynamic: 5.2.3
@angular/router: 5.2.3
@angular/cli: 1.6.7
@angular/compiler-cli: 5.2.3
@angular/language-service: 5.2.3