How to call another component on login button click event?

See more:

angular-cli

I have an Angular cli project where I have to implement login page. The project contains 3 components (login, report-designer and report-viewer). When I run the app, the login page is displayed. On app.component.html I toggle between report-viewer and report-designer when a button is pressed. What I want to accomplish is to get app.component.html when the login is successful. I know I have to use Router to navigate to a certain component, but what I'm doing wrong?

What I have tried:

app.component.ts

import { Component } from '@angular/core';
import { Location } from '@angular/common';
import { Router } from '@angular/router';    
import { Subscription } from "rxjs";
import { HttpClientModule } from '@angular/common/http';
import { environment } from '../environments/environment';
import DXAnalytics from '@devexpress/analytics-core/dx-analytics-core'

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  name = 'Angular';
  display = false;
  display1 = false;
  onPress() {
     //To toggle the component
    this.display = !this.display;
    this.display1 = false;

  }
}

app.component.html

<div id="comp-render">
    <app-login></app-login>
 </div>

<div *ngIf="logedIn"> <!--If I delete *ngIf="logedIn", the login is displayed on the same page as report-viewer/report-designer-->
    <div class="dls-menu-item" style="float: right;">
        <button mat-stroked-button color="primary" style="margin-left:auto;margin-right: 0;" (click)="onPress()" >{{display ? 'Report Viewer' : 'Report Designer'}}</button>        
    </div>
    <br/>
    <div id="comp-render" *ngIf="display">
       <app-report-designer></app-report-designer>
    </div>
    <div id="comp-render" *ngIf="!display">
       <app-report-viewer></app-report-viewer>
    </div>
</div> 

login.component.ts

import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { MatSnackBar } from '@angular/material';
import { Route, Router } from '@angular/router';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
  loginForm: FormGroup | any;
  email:string;
  password:string;
  remail:string;
  rpassword:string;
  rcpassword:string;  

  ngOnInit(): void {
  }

  constructor(private snackBar:MatSnackBar, private router:Router){

  }
  register() {

  }
  login() {
    if(this.email=="admin" && this.password=="admin"){
        this.snackBar.open('Login Successful','',{duration:1000})
        this.router.navigate(['/app.component'])
    }else{
      this.snackBar.open('Login error','',{duration:1000})
    }
  }
}

Maybe I am doing wrong the routing and some lines should be added also on app-routing.module.ts.