Ionic Pop up issue

Ionic Framework ionic-v3
#1

Hello, I have this pop up with an app i’m creating

    showProfile() {
            let alert = this.alertCtrl.create({
                title: 'All profile infos',
                subTitle: '<br>Name : &nbsp;Bill Gates<br> Username : &nbsp;billgates
                buttons: ['OK']
            });
            alert.present();
      }

The name & user name info should be gotten from the api.

As you can see above, I know how to put a string to be shown, in a popup but i need to take information from my api, and put it in the popup

I’ll like to know if there’s any method to acheive this

#2 
'<br>Name : &nbsp;Bill Gates<br> Username : &nbsp;billgates',

Get the api result before you build the popup then

'<br>Name : &nbsp;' + this.user.name + '<br>Username : &nbsp;' + this.user.username,
1 Like
#3

Thank you I’ll try that, and i wish to ask, is there any way to add ionicons in a pop up please?

#4

ion-icon is an Angular component. The popup expects strings (for title/subTitle) and that string won’t be interpreted by Angular so you can’t use a component in the popup.

But since the Ionic icons are rendered from the ionicons font file, you can create a css class to render the icon you want:

this.alertCtrl.create({
      title: `Title with icon: <span class="icon-wifi"></span>`
}).present();

Then define the icon-wifi .css in app.scss (this has to be declared globally as the alert is not part of you component tag):

.icon-wifi {
  display: inline-block;
  background: yellow;
  font-family: "Ionicons";
  font-size: 20px;
}

.icon-wifi::before {
  content: "\f26d";
}

The important part here is the content. Since the icon comes from a fontfile, it means each icon has a character assigned to it. The content represents that character. You need to find out that character for the icon you want to use. One way is to open the Icons page and lookup the character in using developer tools:

image
icon-inspect.png2864×1076 803 KB

2 Likes
#5

Do you know of any changes in Ionic recently that would prevent this from working? It seems so simple, yet I cannot get the icon to render.

Sorry - I just re-read the part about it needing to be in app.scss. Thank you for this great tip!