How to change username in SideDrawer (NativeScript)?

Question

Angular

There is such a template: https://github.com/NativeScript/nativescript-app-t...
This is an application with a sliding menu.
The app.component.htmlmenu itself is written:

<RadSideDrawer [drawerTransition]="sideDrawerTransition">
    <GridLayout tkDrawerContent rows="auto, *" class="sidedrawer sidedrawer-left">
        <StackLayout row="0" class="sidedrawer-header">
            <Label class="sidedrawer-header-image fa" text="&#xf2bd;"></Label>
            <Label class="sidedrawer-header-brand" text="User Name"></Label>
            <Label class="footnote" text="[email protected]"></Label>
        </StackLayout>
    </GridLayout>

    <page-router-outlet tkMainContent class="page page-content"></page-router-outlet>
</RadSideDrawer>

I added a service auth.service.tsinside which the user is authenticated. The user data comes from the server. How to change the username in the menu while receiving data from the server?
I've searched all over the Internet, tried to use bindingContext - nothing helps.
PS:
First of all, I corrected the label:
[text]="userName"
Now, if I add a field userNameto the class AppComponent, then everything works as it should. But how to change the field from the service?