Angular 7 : How to get a data from a class

Question

Student class:

// I got a Student class here (mock-students.ts)

export class Student {  
    id: string;  
    password: string;  
}

Above are the Student class (mock-student.ts)

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

import { Student } from '../student';
import { STUDENTS } from '../mock-students';
import { StudentService } from '../student.service';

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

  constructor(private studentService: StudentService, private router: Router) { }

  student: Student[];

  id: string;
  password: string;

  ngOnInit() {
    this.getStudent();
  }

  login(): void {

    // I want to make a change here 
    if(this.id ==  '123' && this.password == '123') {
      this.router.navigate(["user"]);
    } else {
      alert("Invalid")
    }
  }

  getStudent(): void {
    this.studentService.getStudent()
    .subscribe(student => this.student = student);
  }
}

Above is my LoginComponent. My question is how can I get data from the Student class and make the data can login to next route? Thank you I hope you all understand

login.component.html

<div fxLayout="column" fxLayoutAlign="space-around center">
  <mat-card class="login-card">
      <mat-card-header>
        <mat-card-title>Login</mat-card-title>
      </mat-card-header>

      <mat-card-content>
        <form class="login-form">
          <mat-form-field class="login-full-width">
            <input matInput placeholder="Matric Card Number" [(ngModel)]="id" name="id" required/>
          </mat-form-field>
            <mat-form-field class="login-full-width">
              <input matInput placeholder="Password" [(ngModel)]="password" type="password" name="password" required/>
          </mat-form-field>
        </form>
      </mat-card-content>

      <mat-card-actions align="end">    
        <button mat-raised-button (click)="login()" color="primary">Login</button>   
        <button mat-raised-button color="primary">Reset</button>
      </mat-card-actions>
  </mat-card>
</div>

Student.service.ts

import { Injectable } from '@angular/core';
import { Observable, of } from 'rxjs';
import { Student } from './student';
import { STUDENTS } from './mock-students';

@Injectable({
  providedIn: 'root'
})
export class StudentService {

  constructor() { }

  getStudents(): Observable<Student[]> {
    return of(STUDENTS);
  }
}

mock-students.ts

    import { Student } from './student';

export const STUDENTS: Student[] = [
    { id: 'AM1705002120', password: 'hisyam' },
    { id: 'AM1705002121', password: 'taca' },
    { id: 'AM1705002122', password: 'deena' },
    { id: 'AM1705002123', password: 'ucop' },
    { id: 'AM1705002124', password: 'ha' },
]

you mean that you want to pass the Student object to the next component where you route the user after login? — hpfs, Jan 27 '19 at 05:25
You can pass the data in the route or store it the session storage. Anyway i think you're question is a duplicate of this https://stackoverflow.com/questions/36835123/how-do-i-pass-data-to-angular-routed-components — hpfs, Jan 27 '19 at 05:42
oke , how to change the if statement to make it true base on the Student object ? — Dory, Jan 27 '19 at 05:49

hpfs · Answer 1 · 2019-01-27T10:59:34.123

login.component.ts

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { Location } from '@angular/common';

import { Student } from '../student';
import { StudentService } from '../student.service';

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

  student: Student;

  constructor(
     private studentService: StudentService,
     private router: Router,
     private location: Location
     ) { }


  id: string;
  password: string;

  ngOnInit() {
  }

  login(): void {

    this.studentService.getStudent(this.id, this.password)
      .subscribe( student => {
        this.router.navigate(["user"]); 
      }, err => alert(err));
  }
}

Student.service.ts

import { Injectable } from '@angular/core';
import { Observable, of, throwError } from 'rxjs';
import { Student } from './student';
import { STUDENTS } from './mock-students';

@Injectable({
  providedIn: 'root'
})
export class StudentService {

  getStudents(): Observable<Student[]> {
    return of(STUDENTS);
  }
  
  getStudent(id: string, password: string): Observable<Student> {
    const student = STUDENTS.filter( s => s.id === id && s.password === password);

    if (student.length === 1) {
       return of(student[0]);
    }
    
    return throwError('Invalid');
  }
}

hpfs · Answer 2 · 2019-01-27T10:50:57.570

0

Remove the code from the ngOnInit and call the service inside the login method.

login(): void {

  this.studentService.getStudent()
    .subscribe( student => {
        const result = student.filter( s => this.id === s.id && this.password === s.password);
     
        if (result.length > 0) {
          this.router.navigate(["user"]);
          return;
        }
        alert("Invalid");
      });    
}

But take care that is really unsafe code. You should relay on api call to authenticate the student and then receive an auth token etc. etc. etc.

  login(): void {
    this.studentService.getStudent(this.id, this.password)
      .subscribe( s => {
        this.router.navigate('[user]');
      }, error => {
        alert('Invalid' + error.message);
      });
  }

edited Jan 27 '19 at 10:50

answered Jan 27 '19 at 06:02

hpfs

486
9
14

it says that " [ts] Cannot invoke an expression whose type lacks a call signature. Type 'StudentService' has no compitible call signature [2349]. – Dory Jan 27 '19 at 06:26
yes the last one is a proposal to refactor the code. It does not exists. But you should implement the getStudent in that way eventually. – hpfs Jan 27 '19 at 06:28
can you help me check the StudentService, is it i do it correctly – Dory Jan 27 '19 at 06:30
done update including student.service.ts and mock-student.ts – Dory Jan 27 '19 at 06:33
Student.service.ts ``` import { Injectable } from '@angular/core'; import { Observable, of } from 'rxjs'; import { Student } from './student'; import { STUDENTS } from './mock-students'; @Injectable({ providedIn: 'root' }) export class StudentService { constructor() { } getStudents(): Observable { return of(STUDENTS); } } ``` – hpfs Jan 27 '19 at 07:12
Still get the same error like just now . I already upload it here https://stackblitz.com/edit/angular-ypyaq9 so you can see it clearly – Dory Jan 27 '19 at 08:16
I've updated stackblitz. There were some error. And you mixed up also the things. – hpfs Jan 27 '19 at 10:51
i don't have the ability to save changes on stack blitz – hpfs Jan 27 '19 at 11:00

Angular 7 : How to get a data from a class

2 Answers2