Change ion-title in ts file


#1

How can I change the ion-title in my home.html file through a function in my home.ts file?

<ion-header>
<ion-navbar color="dark">
    <button ion-button menuToggle>
        <ion-icon name="menu"></ion-icon>
    </button>

  <ion-title></ion-title> <---- I want to change this value through a function in my ts file
</ion-navbar>

#2

means you want to change the text of the title???


#3

yep exactly. can it be done through a function in my ts file?


#4

you can do it with data binding…


#5

how does one do data binding? do you have any links I can use? :sweat_smile:


#6

Are you are new to the Ionic and Angular?,
Its pretty simple actually

on html
<ion-title>{{myTitle}}<ion-title>

and in your ts component

myTitle: string = 'Default Title';

myFunction() {
   this.myTitle = 'Dynamic Title';
}

Thats all


#7

yep I’m still learning from the get go and whatever problems I encounter :sweat_smile::sweat_smile:

I’ll try this out then. I’ll let you know if it works


#8

I recommend you to first get to know about the Angular before learning Ionic.


#9

I’ll keep that in mind then :+1:


#10

:+1::+1: Welcome to the Ionic & Angular