Angular and Typescript with bootstrapModals Different text of modal Calling Button in different components

Question

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 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 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 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 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.

Answer 1

closeResult: string;

@Input() buttonLabel: string;

}

Now when you call the component from any other html, you can specify the text for the modal's button, replace with <app-modal [buttonLabel]="Get Started Now"> or <app-modal [buttonLabel]="Post a task">

<button class="btn post-task" (click)="openVerticallyCentered(content)">{{buttonLabel}}</button>

Answer 2

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>