How to get component name?


#1

Hello all, I am using custom component by generate cli. In that component’s controller. I want to get current active component name so I can set page tittle accordingly . Or any other way is there?


#2

This is a bad idea that will not work in production builds. Rethink your design.


#3

This is my common-menu for headers:

<ion-navbar color="primary">
    <ion-buttons left>
        <button ion-button menuToggle left>
            <ion-icon name="menu"></ion-icon>
        </button>
    </ion-buttons>
    <ion-title>{{pageTitle}}</ion-title>
    <ion-buttons right>
        <button ion-button icon-only (click)="openMore($event)">
            <ion-icon name="more"></ion-icon>
        </button>
    </ion-buttons>
</ion-navbar>

And using it like in other comonents :

<ion-header>
    <common-menu></common-menu>
</ion-header>

How can I set page Title for different components then? Any Idea?


#4

Why will it can be a bad idea in production?


#5

@wilfredonoyola, when all the code from your app is transformed from typescript to javascript there’s no guarantee that components will retain the same name.

Its possible that you can guarantee they will NOT retain the same name, but I’m not versed enough in the process to say. Either way, using a reference to ‘LoginPage’ could or will end up referencing nothing, because it’s now (hypothetically) components[1] and has no name or has been renamed to ‘component_loginpage’, ‘c_1a’, etc…

Components actually stop being components at that time and are (if I understand the process to a decent degree) turned into javascript variables / IIFE’s

var LoginPage = (function(alertController, loginProvider))();

That’s a guess as to how it looks but should give you an idea of how unreliable direct references to a component are in the end.