Angular 6 Mat-Dialog does not open from router-outlet
0
I have a problem while trying to open a mat-dialog in my application.
The weird thing about it is that the dialog doesn't open from the login component which is load by router-outlet:
<div class="main-page">
<div class="header-eco" *ngIf="resources.user" >
<eco-header [FormHeader]="'ECO - ' + formHeader"></eco-header>
</div>
<button (click)="openDialogTest()"></button>
<div class="form-container">
<router-outlet ></router-outlet>
</div>
<div class="footer-c" *ngIf="resources.user" >
<eco-footer
[ShowNavPrev]="CanNavBack()"
[ShowNavNext]="CanNavNext()"
[prev]="prevPage"
[next]="nextPage"
[showAddButton]="ShowAddButton()"
[disableSaveButton]="DisableSaveButton()"
[disableAddButton]="DisableAddButton()"
[showSaveButton]="ShowSaveButton()"
(SubmitForm)="SubmitForm($event)"
(AddNewRow)="AddNewRow($event)"
></eco-footer>
</div>
when I'm invoking the same code, it work from the "openDialogTest" and not from my login component.
to open the dialog I'm using the following code:
export class LoginComponent implements OnInit {
constructor(private http:CommunicationServieService, private dialog: MatDialog){}
ForgotPassword(){
console.log("open")
const dialogConfig = new MatDialogConfig();
dialogConfig.autoFocus = true;
const dialogRef = this.dialog.open(ForgotPasswordDialogComponent, dialogConfig);
}
my appModule:
import { ForgotPasswordDialogComponent } from './Dialogs/forgot-password-dialog/forgot-password-dialog.component';
@NgModule({
declarations: [
AppComponent,
...
ForgotPasswordDialogComponent,
ChangePasswordDialogComponent],
entryComponents:[BaseDialogComponent,ForgotPasswordDialogComponent,ChangePasswordDialogComponent]
Edit
I added some console log to make sure that the function is invoked and it does.
my LoginComponent HTML:
<div>
<a href="#" (click)="ForgotPassword()" class="txt1">
Forgot Password?
</a>
</div>
my Login Component ts:
ForgotPassword(){
console.log("open")
const dialogConfig = new MatDialogConfig();
dialogConfig.autoFocus = true;
const dialogRef = this.dialog.open(ForgotPasswordDialogComponent, dialogConfig);
}
any suggestions?
angular dialog angular-material
asked Nov 23 '18 at 17:02
Or YaacovOr Yaacov
669215
add a comment |
0
I have a problem while trying to open a mat-dialog in my application.
The weird thing about it is that the dialog doesn't open from the login component which is load by router-outlet:
<div class="main-page">
<div class="header-eco" *ngIf="resources.user" >
<eco-header [FormHeader]="'ECO - ' + formHeader"></eco-header>
</div>
<button (click)="openDialogTest()"></button>
<div class="form-container">
<router-outlet ></router-outlet>
</div>
<div class="footer-c" *ngIf="resources.user" >
<eco-footer
[ShowNavPrev]="CanNavBack()"
[ShowNavNext]="CanNavNext()"
[prev]="prevPage"
[next]="nextPage"
[showAddButton]="ShowAddButton()"
[disableSaveButton]="DisableSaveButton()"
[disableAddButton]="DisableAddButton()"
[showSaveButton]="ShowSaveButton()"
(SubmitForm)="SubmitForm($event)"
(AddNewRow)="AddNewRow($event)"
></eco-footer>
</div>
when I'm invoking the same code, it work from the "openDialogTest" and not from my login component.
to open the dialog I'm using the following code:
export class LoginComponent implements OnInit {
constructor(private http:CommunicationServieService, private dialog: MatDialog){}
ForgotPassword(){
console.log("open")
const dialogConfig = new MatDialogConfig();
dialogConfig.autoFocus = true;
const dialogRef = this.dialog.open(ForgotPasswordDialogComponent, dialogConfig);
}
my appModule:
import { ForgotPasswordDialogComponent } from './Dialogs/forgot-password-dialog/forgot-password-dialog.component';
@NgModule({
declarations: [
AppComponent,
...
ForgotPasswordDialogComponent,
ChangePasswordDialogComponent],
entryComponents:[BaseDialogComponent,ForgotPasswordDialogComponent,ChangePasswordDialogComponent]
Edit
I added some console log to make sure that the function is invoked and it does.
my LoginComponent HTML:
<div>
<a href="#" (click)="ForgotPassword()" class="txt1">
Forgot Password?
</a>
</div>
my Login Component ts:
ForgotPassword(){
console.log("open")
const dialogConfig = new MatDialogConfig();
dialogConfig.autoFocus = true;
const dialogRef = this.dialog.open(ForgotPasswordDialogComponent, dialogConfig);
}
any suggestions?
angular dialog angular-material
asked Nov 23 '18 at 17:02
Or YaacovOr Yaacov
669215
You are opening the dialog from the ForgotPassword function but that function is never used in your code. Your button calls openDialogTest() but that function is not shown anywhere.
– G. Tranter
Nov 23 '18 at 17:33
@G.Tranter I added my Login component, as I said in the Edit, I also added some console.log to make sure that the function is being invoked and it does.
– Or Yaacov
Nov 23 '18 at 17:47
You're leaving something critical out, but I don't know what. People open dialogs from routed components all the time - it is probably the norm.
– G. Tranter
Nov 23 '18 at 19:27
add a comment |
0
0
0
I have a problem while trying to open a mat-dialog in my application.
The weird thing about it is that the dialog doesn't open from the login component which is load by router-outlet:
<div class="main-page">
<div class="header-eco" *ngIf="resources.user" >
<eco-header [FormHeader]="'ECO - ' + formHeader"></eco-header>
</div>
<button (click)="openDialogTest()"></button>
<div class="form-container">
<router-outlet ></router-outlet>
</div>
<div class="footer-c" *ngIf="resources.user" >
<eco-footer
[ShowNavPrev]="CanNavBack()"
[ShowNavNext]="CanNavNext()"
[prev]="prevPage"
[next]="nextPage"
[showAddButton]="ShowAddButton()"
[disableSaveButton]="DisableSaveButton()"
[disableAddButton]="DisableAddButton()"
[showSaveButton]="ShowSaveButton()"
(SubmitForm)="SubmitForm($event)"
(AddNewRow)="AddNewRow($event)"
></eco-footer>
</div>
when I'm invoking the same code, it work from the "openDialogTest" and not from my login component.
to open the dialog I'm using the following code:
export class LoginComponent implements OnInit {
constructor(private http:CommunicationServieService, private dialog: MatDialog){}
ForgotPassword(){
console.log("open")
const dialogConfig = new MatDialogConfig();
dialogConfig.autoFocus = true;
const dialogRef = this.dialog.open(ForgotPasswordDialogComponent, dialogConfig);
}
my appModule:
import { ForgotPasswordDialogComponent } from './Dialogs/forgot-password-dialog/forgot-password-dialog.component';
@NgModule({
declarations: [
AppComponent,
...
ForgotPasswordDialogComponent,
ChangePasswordDialogComponent],
entryComponents:[BaseDialogComponent,ForgotPasswordDialogComponent,ChangePasswordDialogComponent]
Edit
I added some console log to make sure that the function is invoked and it does.
my LoginComponent HTML:
<div>
<a href="#" (click)="ForgotPassword()" class="txt1">
Forgot Password?
</a>
</div>
my Login Component ts:
ForgotPassword(){
console.log("open")
const dialogConfig = new MatDialogConfig();
dialogConfig.autoFocus = true;
const dialogRef = this.dialog.open(ForgotPasswordDialogComponent, dialogConfig);
}
any suggestions?
angular dialog angular-material
asked Nov 23 '18 at 17:02
Or YaacovOr Yaacov
669215
I have a problem while trying to open a mat-dialog in my application.
The weird thing about it is that the dialog doesn't open from the login component which is load by router-outlet:
<div class="main-page">
<div class="header-eco" *ngIf="resources.user" >
<eco-header [FormHeader]="'ECO - ' + formHeader"></eco-header>
</div>
<button (click)="openDialogTest()"></button>
<div class="form-container">
<router-outlet ></router-outlet>
</div>
<div class="footer-c" *ngIf="resources.user" >
<eco-footer
[ShowNavPrev]="CanNavBack()"
[ShowNavNext]="CanNavNext()"
[prev]="prevPage"
[next]="nextPage"
[showAddButton]="ShowAddButton()"
[disableSaveButton]="DisableSaveButton()"
[disableAddButton]="DisableAddButton()"
[showSaveButton]="ShowSaveButton()"
(SubmitForm)="SubmitForm($event)"
(AddNewRow)="AddNewRow($event)"
></eco-footer>
</div>
when I'm invoking the same code, it work from the "openDialogTest" and not from my login component.
to open the dialog I'm using the following code:
export class LoginComponent implements OnInit {
constructor(private http:CommunicationServieService, private dialog: MatDialog){}
ForgotPassword(){
console.log("open")
const dialogConfig = new MatDialogConfig();
dialogConfig.autoFocus = true;
const dialogRef = this.dialog.open(ForgotPasswordDialogComponent, dialogConfig);
}
my appModule:
import { ForgotPasswordDialogComponent } from './Dialogs/forgot-password-dialog/forgot-password-dialog.component';
@NgModule({
declarations: [
AppComponent,
...
ForgotPasswordDialogComponent,
ChangePasswordDialogComponent],
entryComponents:[BaseDialogComponent,ForgotPasswordDialogComponent,ChangePasswordDialogComponent]
Edit
I added some console log to make sure that the function is invoked and it does.
my LoginComponent HTML:
<div>
<a href="#" (click)="ForgotPassword()" class="txt1">
Forgot Password?
</a>
</div>
my Login Component ts:
ForgotPassword(){
console.log("open")
const dialogConfig = new MatDialogConfig();
dialogConfig.autoFocus = true;
const dialogRef = this.dialog.open(ForgotPasswordDialogComponent, dialogConfig);
}
any suggestions?
angular dialog angular-material
angular dialog angular-material
asked Nov 23 '18 at 17:02
Or YaacovOr Yaacov
669215
asked Nov 23 '18 at 17:02
Or YaacovOr Yaacov
669215
edited Nov 23 '18 at 17:46
Or Yaacov
asked Nov 23 '18 at 17:02
Or YaacovOr Yaacov
669215
asked Nov 23 '18 at 17:02
Or YaacovOr Yaacov
669215
asked Nov 23 '18 at 17:02
Or YaacovOr Yaacov
669215
669215
You are opening the dialog from the ForgotPassword function but that function is never used in your code. Your button calls openDialogTest() but that function is not shown anywhere.
– G. Tranter
Nov 23 '18 at 17:33
@G.Tranter I added my Login component, as I said in the Edit, I also added some console.log to make sure that the function is being invoked and it does.
– Or Yaacov
Nov 23 '18 at 17:47
You're leaving something critical out, but I don't know what. People open dialogs from routed components all the time - it is probably the norm.
– G. Tranter
Nov 23 '18 at 19:27
add a comment |
You are opening the dialog from the ForgotPassword function but that function is never used in your code. Your button calls openDialogTest() but that function is not shown anywhere.
– G. Tranter
Nov 23 '18 at 17:33
@G.Tranter I added my Login component, as I said in the Edit, I also added some console.log to make sure that the function is being invoked and it does.
– Or Yaacov
Nov 23 '18 at 17:47
You're leaving something critical out, but I don't know what. People open dialogs from routed components all the time - it is probably the norm.
– G. Tranter
Nov 23 '18 at 19:27
You are opening the dialog from the ForgotPassword function but that function is never used in your code. Your button calls openDialogTest() but that function is not shown anywhere.
– G. Tranter
Nov 23 '18 at 17:33
You are opening the dialog from the ForgotPassword function but that function is never used in your code. Your button calls openDialogTest() but that function is not shown anywhere.
– G. Tranter
Nov 23 '18 at 17:33
@G.Tranter I added my Login component, as I said in the Edit, I also added some console.log to make sure that the function is being invoked and it does.
– Or Yaacov
Nov 23 '18 at 17:47
@G.Tranter I added my Login component, as I said in the Edit, I also added some console.log to make sure that the function is being invoked and it does.
– Or Yaacov
Nov 23 '18 at 17:47
You're leaving something critical out, but I don't know what. People open dialogs from routed components all the time - it is probably the norm.
– G. Tranter
Nov 23 '18 at 19:27
You're leaving something critical out, but I don't know what. People open dialogs from routed components all the time - it is probably the norm.
– G. Tranter
Nov 23 '18 at 19:27
add a comment |
0
active
oldest
votes
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
});
}
});
draft saved
draft discarded
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%2f53450547%2fangular-6-mat-dialog-does-not-open-from-router-outlet%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
draft saved
draft discarded
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.
draft saved
draft discarded
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%2f53450547%2fangular-6-mat-dialog-does-not-open-from-router-outlet%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
You are opening the dialog from the ForgotPassword function but that function is never used in your code. Your button calls openDialogTest() but that function is not shown anywhere.
– G. Tranter
Nov 23 '18 at 17:33
@G.Tranter I added my Login component, as I said in the Edit, I also added some console.log to make sure that the function is being invoked and it does.
– Or Yaacov
Nov 23 '18 at 17:47
You're leaving something critical out, but I don't know what. People open dialogs from routed components all the time - it is probably the norm.
– G. Tranter
Nov 23 '18 at 19:27