Change the Text of Modal calling Button when it is called from any other component in AngularJS

I have a component named Modal when I am working in Angular. I want to open the same Modal Component from two different places. But I want that the text of button mentioned in Banner in the given picture should be "Get Started Now" See the Image.

Here is the image and code of modal.component.html with button.

<div class="modal-here">    
    <ng-template #content let-modal>
      <div class="modal-header">
        <h4 class="modal-title">Modal 1</h4>
        <button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Modal 1 body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-light" (click)="modal.close('Close click')">Close</button>
      </div>
    </ng-template>
    <button class="btn post-task" (click)="openVerticallyCentered(content)">Post a task</button>
</div>

Here is the image and code of modal.component.ts Code

import { Component, OnInit } from '@angular/core';
import {NgbModal, ModalDismissReasons} from '@ng-bootstrap/ng-bootstrap';

@Component({
    selector: 'app-modal',
    templateUrl: './modal.component.html',
    styleUrls: ['./modal.component.css']
})
export class ModalComponent implements OnInit {

    closeResult: string;

    constructor(private modalService: NgbModal) {}

    ngOnInit(): void {
    }

    openVerticallyCentered(content) {
        this.modalService.open(content, { centered: true, windowClass: 'setClass' });
    }

}

Here is header.component.html image of code, html and typescript code where I want the same modal with same Text in button as it is already placed

<header>
    <nav class="container navbar navbar-expand-md fixed-top nav-setting">
        <ng-container *ngFor= "let main_link of logo_link">
            <a class="navbar-brand brand-logo" href="{{main_link.href}}">
                <img class="img-fluid" src="../assets/images/logo.png">
            </a>
        </ng-container>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse"
            aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarCollapse">
            <ul class="navbar-nav mr-auto left-menu">
                <app-modal></app-modal>
                <ng-container *ngFor= "let l_menu of left_menus">
                    <li class="nav-item">
                        <a class="{{l_menu.class}}" href="{{l_menu.routerLink}}">{{l_menu.text}}</a>
                    </li>
                </ng-container>
            </ul>
        </div>
        <div class="admin-side">
            <ul class="navbar-nav ml-auto right-menu">
                <ng-container *ngFor= "let r_menu of right_menus">
                    <li class="nav-item">
                        <a class="{{r_menu.class}}" routerLink="{{r_menu.routerLink}}">{{r_menu.text}}</a>
                    </li>
                </ng-container>
            </ul>
        </div>
    </nav>
</header>

Here is header.component.ts code

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

@Component({
    selector: 'app-header',
    templateUrl: './header.component.html',
    styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {

    logo_link = [
        {"href" : "http://localhost:4200/"}
    ]

    left_menus = [
    
        {"routerLink" : "", "text" :"Categories", "class" : "uper-line nav-link"},

        {"routerLink" : "/tasks", "text" :"Browse tasks", "class" : "uper-line nav-link"},
        
        {"routerLink" : "/how-it-works", "text" :"How it works", "class" : "uper-line nav-link"}
    ]
    right_menus = [
        {"routerLink" : "/sign-up", "text" :"Sign Up", "class" : "nav-link sign-up"},
        
        {"routerLink" : "/login", "text" :"Login", "class" : "nav-link login"},

        {"routerLink" : "/earn-money", "text" :"Become a Tasker", "class" : "nav-link tasker"}
    ]

    constructor() { }

    ngOnInit(): void {
    
    }

}

Here is app.component.html banner image of code, html and typescript code where I want to use same modal but text of button should be changed with "Get Started Now".

<app-header></app-header>
<div class="content" role="main">
    <div class="container-fluid banner position-relative">
        <div class="row bg-image">
          <div class="col-sm-12"></div>
        </div>  
        <div class="row align-items-center banner-content position-absolute m-0 w-100">
            <div class="col-sm-12">
                <div class="custome-container">
                    <h1 class="title banner-title">
                      Connect with experts to get the job done on Airtasker
                    </h1>
                    <p class="description banner-text">
                        It’s amazing what you can’t do yourself
                    </p>
                    <div class="banner-button">
                        <app-modal></app-modal>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-12">
                <div class="custome-container need-section">
                    <div class="inner-grid">
                        <h2 class="title">What do you need done?</h2>
                        <div class="services">
                            <div class="">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<app-footer></app-footer>
<router-outlet></router-outlet>

Here is app.component.ts code.

import { Component } from '@angular/core';
import {NgbConfig} from '@ng-bootstrap/ng-bootstrap';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Problemsolver';
  constructor(ngbConfig: NgbConfig) {
    ngbConfig.animation = true;
  }
}

Here is app.module.ts code

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import {NgbPaginationModule, NgbAlertModule} from '@ng-bootstrap/ng-bootstrap';
import { HeaderComponent } from './header/header.component';
import { ModalComponent } from './modal/modal.component';
import { FooterComponent } from './footer/footer.component';

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    ModalComponent,
    FooterComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    NgbModule,
    NgbPaginationModule,
    NgbAlertModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

CSS for all this code is here.

@font-face {
  font-family: Museo Sans Regular;
  src: url(assets/Fonts/MuseoSans-300.otf);
}
@font-face {
  font-family: Museo Sans Bold;
  src: url(assets/Fonts/MuseoSans_700.otf);
}
@font-face {
  font-family: Museo Sans Black;
  src: url(assets/Fonts/Museo-black.otf);
}
@font-face {
  font-family: MuseoSansBold;
  src: url(assets/Fonts/MuseoModerno-Bold.ttf);
}
body {
    font-family: Museo Sans Regular !important;
}
h1, h2{
    font-family: Museo Sans Black !important;
}
h3, h4, h5, h6{
    font-family: Museo Sans Bold !important;
}
.bg-image {
    background: url(../assets/images/top-banner.jpg);
    max-height: 616px;
    height: 100%;
    background-size: cover;
    background-position: top center;
}
.banner {
    height: calc(100vh - 120px);
    max-height: 616px;
    min-height: unset;
    background: rgb(41, 43, 50);
}
.custome-container {
    max-width: 944px;
    margin: auto;
    padding: 0px 32px;
}
.banner-content {
    top: 50%;
    left: 0px;
    transform: translateY(-40%);
}
.banner-title {
    font-size: 45px;
    color: #fff;
    margin: 0px 0px 16px;
}
.banner-text {
    color: rgb(255, 255, 255);
    font-size: 34px;
    font-weight: initial;
    line-height: 40px !important;
    letter-spacing: -0.15px;
    text-decoration: initial;
    text-align: initial;
    vertical-align: initial;
    font-style: initial;
    white-space: initial;
    margin: 0px;
    padding: 0px;
}
.banner-button {
    margin: 24px 0px;
}
.banner-button button {
    border-radius: 160px;
    display: inline-block;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    box-sizing: border-box;
    margin: 0px;
    border-color: rgba(0, 0, 0, 0);
    border-width: 2px;
    border-style: solid;
    color: rgb(255, 255, 255);
    padding: 16px 24px;
    font-size: 18px;
    font-weight: initial;
    line-height: 24px !important;
    letter-spacing: 0.15px;
    background-color: rgb(224, 68, 109);
}
.modal-here {
    display: flex;
    height: 100%;
    align-items: center;
}
.post-task {
    background: #e0446d;
    border-radius: 200px;
    border: 2px solid rgba(41,43,50,.1);
    text-shadow: 0 1px 2px rgba(0,0,0,.25);
    transition: text-shadow .35s cubic-bezier(.615,.19,.305,.91),border .35s cubic-bezier(.615,.19,.305,.91);
    font-size: 11px;
    height: 31px;
    display: flex;
    letter-spacing: .44px;
    line-height: 27px;
    margin: 0 10px 0 20px;
    overflow: hidden;
    text-align: center;
    text-shadow: 0 1px 1px #9a0137;
    width: 94px;
    color: #fff;
    align-items: center;
}
.nav-setting {
    padding-left: 60px;
    padding-right: 60px;
}
.brand-logo img {
    width: 120px;
}
.navbar-brand.brand-logo {
    margin-right: 20px;
}
.nav-link {
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    height: 41px;
    font-size: 13px;
    letter-spacing: .4px;
    position: relative;
    text-decoration: none;
    white-space: pre-wrap;
    padding: 0px 10px;
}
.nav-link:hover {
    opacity: 0.6;
}
.nav-item {
    display: flex;
    align-items: center;
}
.nav-link.tasker {
    margin-right: 4px;
    font-size: 11px;
    padding: 5.5px 14.1px;
    border-radius: 200px;
    display: inline-block;
    letter-spacing: .05em;
    transition: text-shadow .35s cubic-bezier(.615,.19,.305,.91),border .35s cubic-bezier(.615,.19,.305,.91);
    box-sizing: border-box;
    background-color: transparent;
    border: 1px solid #fff;
    box-shadow: none;
    height: auto;
    opacity: 1;
}
.nav-link.tasker:hover {
    background-color: #fff;
    border: 1px solid #008fb4;
    color: #008fb4;
    opacity: 1;
}
.uper-line.nav-link:before {
    content: "";
    display: block;
    position: absolute;
    background-color: #fff;
    border-radius: 1.5px;
    height: 3px;
    left: 0;
    margin: auto;
    right: 0;
    width: 80%;
    z-index: 1000;
    transform: translateY(-100%);
    transition: transform .2s cubic-bezier(.615,.19,.305,.91);
    opacity: 0;
    top: -8px;
}
.uper-line.nav-link:hover:before{
    opacity: 0.6;
    transform: translateY(0);
}

Here is image which describe the actual result that I want.

Solution

You should add a variable in modal.component.ts and then use that variable's value in modal.component.html file

_btnLabel: string = '';

then to get input use @Input

@Input()
set btnLabel(value) {
    this._btnLabel = value;
}

Now you can use that value in you modal.component.html file

<button>{{_btnLabel}}</button>

Now set a variable in the component's ts file in which you need value. like in this case go to header.component.ts file and in exports set define a variable with value you need, as:


_header: string = "Post a task";

Get this defined value in html file as in this case header.component.html file


<app-modal [btnLabel] = "_header"></app-modal>