angulartypescriptbootstrap-modalangular-bootstrapangular-module
Angular and Typescript with bootstrapModals Different text of modal Calling Button in different components
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">×</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 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.
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>