CODEWITHSUNDEEP
javascriptangularangular6
ashwin karki
ashwin karki

Reputation: 673

How to pass @Input() decorator value to its html file?

I have main app.component.ts,from here i am passing the currentstatus variable to the chid component(Navbar Component) which is navbar.component.ts and i have passed the value to the Navbar component using @input() decorator but I am getting problem how to pass this value of input decorator to navbar.component.html?

My main app.component.ts is

export class AppComponent {

      public currentstatus: any;

      constructor(private authService:LoginAuthService,private router:Router){
           this.currentstatus=this.authService.getStatus().
           subscribe(currentstatus => {
            this.currentstatus=currentstatus;
           })
      }

      logout(){
        localStorage.removeItem('currentUser');
        this.router.navigate(['login']);
      }

From here i am passing this currentstatus

My app.component.html is

<div id = "wrapper">
    <div class="main-page">
<app-navbar [currentstatus]="currentstatus" ></app-navbar>

<router-outlet></router-outlet>
<app-footer></app-footer>
</div>
</div>

here i have passed the currentstatus to navbar.component.ts

export class NavbarComponent implements OnInit {

    @Input() currentstatus:any;


   constructor(){

  }
  ngOnInit() {
  }

  logout(){

  }
}

now how to pass this currentstatus to navbar.component.html???

Upvotes: 3

Views: 339

Answers (1)

Pac0
Pac0

Reputation: 23139

You error was that you are doing something like abc = service.get().subscribe(result => abc = result;})

(you are trying to set currentstatus both as the whole Subscirption and as the result of the subscribe)

Just use your service like this :

Either assign to currentstatus the result of your request :

Possibility 1 :

AppComponent :

this.authService.getStatus().subscribe(
    result =>  { this.currentstatus = result; });

Possibility 2 :

Or you can use async pipe from Angular to do the subscribe for you, in this case currentstatus in the parent app should be the whole Observable (without subscribe), this would give something like :

AppComponent.ts :

// assign the Observable to your variable currentstatus
this.currentstatus = this.authService.getStatus();

AppComponent.html :

<app-navbar [currentstatus]="currentstatus | async"></navbar>

NB :

Remark for both cases : in general, it's usually best practice to execute service calls in a ngOnInit function instead of the constructor.

Upvotes: 2

Related Questions