When working in Angular, I have a component called Modal. I need to open the same Modal Component from two different places. The catch is, I want the button text in the Banner image to say "Get Started Now". Check out the Image linked below for reference.
https://i.stack.imgur.com/4LPp3.png
Below is the code snippet from modal.component.html with the button included.
<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">×</span>
</button>
</div>
<div class="modal-body">
<p>Modal 1 body…</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 TypeScript code from modal.component.ts
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' });
}
}
In the header.component.html TypeScript code, I aim to use the same modal with the same button text as previously placed
<header>
<nav class="container navbar navbar-expand-md fixed-top nav-setting">
<!-- Main logo links here -->
<ul class="navbar-nav mr-auto left-menu">
<app-modal></app-modal>
<!-- Other left menu items go here -->
</ul>
<div class="admin-side">
<ul class="navbar-nav ml-auto right-menu">
<!-- Right menu items -->
</ul>
</div>
</nav>
</header>
Let's provide the app.component.html banner TypeScript code which requires the same modal but with the button text changed to "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>
<app-footer></app-footer>
<router-outlet></router-outlet>
CSS styling for all the provided code snippets can be found down below.
@font-face {
font-family: Museo Sans Regular;
src: url(assets/Fonts/MuseoSans-300.otf);
}
/* Rest of the CSS styles */
The desired output image is presented below for illustration purposes.