To call different dialog window based on the button present in the component
I have a component called home which as some description and button inside it. As in below image.
I am reusing the same
homecomponent in another 2 components calledcarandbike.Here in
carcomponent on clicking the button (i,e button present in the home component), I am calling a component calledcar-bookinginside a dialog window. This requirement is done now.But I am re-using
homecomponent inbikecomponent too. In bike component on clicking the button(i,e button present in the home component) I should call another component(ex bike-booking)inside the dialog window.
How can I change the (click) function of the particular button on basis of its presence in the component?
The stackblitz DEMO
angular typescript angular-material angular6
edited Nov 12 '18 at 12:08
Yashwardhan Pauranik
1,82011227
asked Nov 12 '18 at 10:34
Shankar guru
4171319
add a comment |
I have a component called home which as some description and button inside it. As in below image.
I am reusing the same
homecomponent in another 2 components calledcarandbike.Here in
carcomponent on clicking the button (i,e button present in the home component), I am calling a component calledcar-bookinginside a dialog window. This requirement is done now.But I am re-using
homecomponent inbikecomponent too. In bike component on clicking the button(i,e button present in the home component) I should call another component(ex bike-booking)inside the dialog window.
How can I change the (click) function of the particular button on basis of its presence in the component?
The stackblitz DEMO
angular typescript angular-material angular6
edited Nov 12 '18 at 12:08
Yashwardhan Pauranik
1,82011227
asked Nov 12 '18 at 10:34
Shankar guru
4171319
Could you provide your code here rather than a link.
– Wojtek T
Nov 12 '18 at 10:43
The components are more , to post the code.so i created thestackblitzlink Please see thestackblitzlink. Any doubts arises i will tell you.
– Shankar guru
Nov 12 '18 at 10:45
add a comment |
I have a component called home which as some description and button inside it. As in below image.
I am reusing the same
homecomponent in another 2 components calledcarandbike.Here in
carcomponent on clicking the button (i,e button present in the home component), I am calling a component calledcar-bookinginside a dialog window. This requirement is done now.But I am re-using
homecomponent inbikecomponent too. In bike component on clicking the button(i,e button present in the home component) I should call another component(ex bike-booking)inside the dialog window.
How can I change the (click) function of the particular button on basis of its presence in the component?
The stackblitz DEMO
angular typescript angular-material angular6
edited Nov 12 '18 at 12:08
Yashwardhan Pauranik
1,82011227
asked Nov 12 '18 at 10:34
Shankar guru
4171319
I have a component called home which as some description and button inside it. As in below image.
I am reusing the same
homecomponent in another 2 components calledcarandbike.Here in
carcomponent on clicking the button (i,e button present in the home component), I am calling a component calledcar-bookinginside a dialog window. This requirement is done now.But I am re-using
homecomponent inbikecomponent too. In bike component on clicking the button(i,e button present in the home component) I should call another component(ex bike-booking)inside the dialog window.
How can I change the (click) function of the particular button on basis of its presence in the component?
The stackblitz DEMO
angular typescript angular-material angular6
angular typescript angular-material angular6
edited Nov 12 '18 at 12:08
Yashwardhan Pauranik
1,82011227
asked Nov 12 '18 at 10:34
Shankar guru
4171319
edited Nov 12 '18 at 12:08
Yashwardhan Pauranik
1,82011227
asked Nov 12 '18 at 10:34
Shankar guru
4171319
edited Nov 12 '18 at 12:08
Yashwardhan Pauranik
1,82011227
edited Nov 12 '18 at 12:08
Yashwardhan Pauranik
1,82011227
edited Nov 12 '18 at 12:08
Yashwardhan Pauranik
1,82011227
1,82011227
asked Nov 12 '18 at 10:34
Shankar guru
4171319
asked Nov 12 '18 at 10:34
Shankar guru
4171319
asked Nov 12 '18 at 10:34
Shankar guru
4171319
4171319
Could you provide your code here rather than a link.
– Wojtek T
Nov 12 '18 at 10:43
The components are more , to post the code.so i created thestackblitzlink Please see thestackblitzlink. Any doubts arises i will tell you.
– Shankar guru
Nov 12 '18 at 10:45
add a comment |
Could you provide your code here rather than a link.
– Wojtek T
Nov 12 '18 at 10:43
The components are more , to post the code.so i created thestackblitzlink Please see thestackblitzlink. Any doubts arises i will tell you.
– Shankar guru
Nov 12 '18 at 10:45
Could you provide your code here rather than a link.
– Wojtek T
Nov 12 '18 at 10:43
Could you provide your code here rather than a link.
– Wojtek T
Nov 12 '18 at 10:43
The components are more , to post the code.so i created the
stackblitz link Please see the stackblitz link. Any doubts arises i will tell you.– Shankar guru
Nov 12 '18 at 10:45
The components are more , to post the code.so i created the
stackblitz link Please see the stackblitz link. Any doubts arises i will tell you.– Shankar guru
Nov 12 '18 at 10:45
add a comment |
1 Answer
1
active
oldest
votes
You can use @Output to emit an event to the container, then in the container component you can choose what to do when you receive the event.
HomeComponent
export class HomeComponent {
@Output() openDialog = new EventEmitter();
constructor(public dialog: MatDialog) {}
open(): void {
this.openDialog.emit();
}
}
HomeComponent's template
Hai!! welcome to our application..
<div style="padding:30px;">
<button mat-raised-button (click)="open()" color="primary">ADD</button>
</div>
BikeComponent's template
<app-home (openDialog)="openDialog($event)"></app-home>
BikeComponent ts
export class BikeComponent implements OnInit {
constructor() { }
ngOnInit() {
}
openDialog($event: any) {
// open desired bike component
}
}
CarComponent's template
<app-home (openDialog)="openDialog($event)"></app-home>
CarComponent ts
export class CarComponent implements OnInit {
constructor() { }
ngOnInit() {
}
openDialog($event: any) {
// open desired car component
}
}
Look at official doc: https://angular.io/guide/component-interaction
answered Nov 12 '18 at 10:48
firegloves
3,22511025
I am getting this ERROR:_co.openDialog is not a function
– Shankar guru
Nov 12 '18 at 10:57
let's try now please
– firegloves
Nov 12 '18 at 11:02
Thanks a lot!! you have saved my day.
– Shankar guru
Nov 12 '18 at 11:08
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53260319%2fto-call-different-dialog-window-based-on-the-button-present-in-the-component%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
You can use @Output to emit an event to the container, then in the container component you can choose what to do when you receive the event.
HomeComponent
export class HomeComponent {
@Output() openDialog = new EventEmitter();
constructor(public dialog: MatDialog) {}
open(): void {
this.openDialog.emit();
}
}
HomeComponent's template
Hai!! welcome to our application..
<div style="padding:30px;">
<button mat-raised-button (click)="open()" color="primary">ADD</button>
</div>
BikeComponent's template
<app-home (openDialog)="openDialog($event)"></app-home>
BikeComponent ts
export class BikeComponent implements OnInit {
constructor() { }
ngOnInit() {
}
openDialog($event: any) {
// open desired bike component
}
}
CarComponent's template
<app-home (openDialog)="openDialog($event)"></app-home>
CarComponent ts
export class CarComponent implements OnInit {
constructor() { }
ngOnInit() {
}
openDialog($event: any) {
// open desired car component
}
}
Look at official doc: https://angular.io/guide/component-interaction
answered Nov 12 '18 at 10:48
firegloves
3,22511025
I am getting this ERROR:_co.openDialog is not a function
– Shankar guru
Nov 12 '18 at 10:57
let's try now please
– firegloves
Nov 12 '18 at 11:02
Thanks a lot!! you have saved my day.
– Shankar guru
Nov 12 '18 at 11:08
add a comment |
You can use @Output to emit an event to the container, then in the container component you can choose what to do when you receive the event.
HomeComponent
export class HomeComponent {
@Output() openDialog = new EventEmitter();
constructor(public dialog: MatDialog) {}
open(): void {
this.openDialog.emit();
}
}
HomeComponent's template
Hai!! welcome to our application..
<div style="padding:30px;">
<button mat-raised-button (click)="open()" color="primary">ADD</button>
</div>
BikeComponent's template
<app-home (openDialog)="openDialog($event)"></app-home>
BikeComponent ts
export class BikeComponent implements OnInit {
constructor() { }
ngOnInit() {
}
openDialog($event: any) {
// open desired bike component
}
}
CarComponent's template
<app-home (openDialog)="openDialog($event)"></app-home>
CarComponent ts
export class CarComponent implements OnInit {
constructor() { }
ngOnInit() {
}
openDialog($event: any) {
// open desired car component
}
}
Look at official doc: https://angular.io/guide/component-interaction
answered Nov 12 '18 at 10:48
firegloves
3,22511025
I am getting this ERROR:_co.openDialog is not a function
– Shankar guru
Nov 12 '18 at 10:57
let's try now please
– firegloves
Nov 12 '18 at 11:02
Thanks a lot!! you have saved my day.
– Shankar guru
Nov 12 '18 at 11:08
add a comment |
You can use @Output to emit an event to the container, then in the container component you can choose what to do when you receive the event.
HomeComponent
export class HomeComponent {
@Output() openDialog = new EventEmitter();
constructor(public dialog: MatDialog) {}
open(): void {
this.openDialog.emit();
}
}
HomeComponent's template
Hai!! welcome to our application..
<div style="padding:30px;">
<button mat-raised-button (click)="open()" color="primary">ADD</button>
</div>
BikeComponent's template
<app-home (openDialog)="openDialog($event)"></app-home>
BikeComponent ts
export class BikeComponent implements OnInit {
constructor() { }
ngOnInit() {
}
openDialog($event: any) {
// open desired bike component
}
}
CarComponent's template
<app-home (openDialog)="openDialog($event)"></app-home>
CarComponent ts
export class CarComponent implements OnInit {
constructor() { }
ngOnInit() {
}
openDialog($event: any) {
// open desired car component
}
}
Look at official doc: https://angular.io/guide/component-interaction
answered Nov 12 '18 at 10:48
firegloves
3,22511025
You can use @Output to emit an event to the container, then in the container component you can choose what to do when you receive the event.
HomeComponent
export class HomeComponent {
@Output() openDialog = new EventEmitter();
constructor(public dialog: MatDialog) {}
open(): void {
this.openDialog.emit();
}
}
HomeComponent's template
Hai!! welcome to our application..
<div style="padding:30px;">
<button mat-raised-button (click)="open()" color="primary">ADD</button>
</div>
BikeComponent's template
<app-home (openDialog)="openDialog($event)"></app-home>
BikeComponent ts
export class BikeComponent implements OnInit {
constructor() { }
ngOnInit() {
}
openDialog($event: any) {
// open desired bike component
}
}
CarComponent's template
<app-home (openDialog)="openDialog($event)"></app-home>
CarComponent ts
export class CarComponent implements OnInit {
constructor() { }
ngOnInit() {
}
openDialog($event: any) {
// open desired car component
}
}
Look at official doc: https://angular.io/guide/component-interaction
answered Nov 12 '18 at 10:48
firegloves
3,22511025
edited Nov 12 '18 at 11:02
answered Nov 12 '18 at 10:48
firegloves
3,22511025
answered Nov 12 '18 at 10:48
firegloves
3,22511025
answered Nov 12 '18 at 10:48
firegloves
3,22511025
3,22511025
I am getting this ERROR:_co.openDialog is not a function
– Shankar guru
Nov 12 '18 at 10:57
let's try now please
– firegloves
Nov 12 '18 at 11:02
Thanks a lot!! you have saved my day.
– Shankar guru
Nov 12 '18 at 11:08
add a comment |
I am getting this ERROR:_co.openDialog is not a function
– Shankar guru
Nov 12 '18 at 10:57
let's try now please
– firegloves
Nov 12 '18 at 11:02
Thanks a lot!! you have saved my day.
– Shankar guru
Nov 12 '18 at 11:08
I am getting this ERROR:
_co.openDialog is not a function– Shankar guru
Nov 12 '18 at 10:57
I am getting this ERROR:
_co.openDialog is not a function– Shankar guru
Nov 12 '18 at 10:57
let's try now please
– firegloves
Nov 12 '18 at 11:02
let's try now please
– firegloves
Nov 12 '18 at 11:02
Thanks a lot!! you have saved my day.
– Shankar guru
Nov 12 '18 at 11:08
Thanks a lot!! you have saved my day.
– Shankar guru
Nov 12 '18 at 11:08
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53260319%2fto-call-different-dialog-window-based-on-the-button-present-in-the-component%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Could you provide your code here rather than a link.
– Wojtek T
Nov 12 '18 at 10:43
The components are more , to post the code.so i created the
stackblitzlink Please see thestackblitzlink. Any doubts arises i will tell you.– Shankar guru
Nov 12 '18 at 10:45