CODEWITHSUNDEEP
ionic-frameworkionic4angular8
David_Hogan
David_Hogan

Reputation: 125

Ionic 4 pass property to custom component

I've written a custom component to handle my ion-header as all I need to change per page is the title. However, the title is not displaying as the component doesn't seem to be getting the property from the app page.

Component Template 

<ion-header>
 <ion-toolbar color="primary">
  <ion-buttons slot="start">
    <ion-menu-button></ion-menu-button>
  </ion-buttons>
<ion-title> {{title}} </ion-title>

Component Typescript

import { Component, OnInit, Input } from '@angular/core';
@Component({
  selector: 'app-custom-toolbar',
  templateUrl: './custom-toolbar.component.html',
  styleUrls: ['./custom-toolbar.component.scss'],
})
export class CustomToolbarComponent implements OnInit {

  @Input() title: any;

  constructor() { }

 ngOnInit() {
  }
}

App Page Template

<app-custom-toolbar [title]="Dashboard"></app-custom-toolbar>

Upvotes: 1

Views: 3966

Answers (3)

rtpHarry
rtpHarry

Reputation: 13125

Reposting my comment as requested:

I think if you have the [] around it then to pass a string back you would need "'dashboard'" (so a " with a ' inside it).

Upvotes: 0

Pawan Sharma
Pawan Sharma

Reputation: 2342

You need to declare @Input() title in your custom component to pass value from parent into it like -

Child Component 

...

...

@Input() title: any;

...

...

Parent Component HTML -

<child-component [title]="somePropertyInParentComponent"></child-component>

Edit: According to your updated question . Try removing [] from the title property in parent component

Upvotes: 3

Miguel Carrillo
Miguel Carrillo

Reputation: 347

As Pawan Sharma says, you need to declare an @Input, In this link you can find more information about it. https://victorroblesweb.es/2016/11/07/input-output-angular-2/

Typescript

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

@Component({
  selector: 'app-footertoolbar',
  templateUrl: './footertoolbar.page.html',
})
export class FooterToolbarPage implements OnInit {

  @Input() public activeIndex:number;

  constructor(private navCtrl: NavController) { }
  ngOnInit() {}

  public GoToPage() { console.log(this.activeIndex); }  
}

HTML

<ion-toolbar color="dark">
    <ion-buttons class="sidemargin" slot="secondary">                      
       <ion-button (click)="GoToPage()"></ion-button>               
    </ion-buttons>
</ion-toolbar>

HTML of the component that use the component

<app-footertoolbar [activeIndex]="0" >
</app-footertoolbar>

Upvotes: 1

Related Questions