Hi, I'm having trouble with MatDialog. Is it possible to include a custom component within a dialog component? I keep getting errors:
error NG8001: 'my-comp' is not a known elementMy dialog component is called with:
this.dialog.open(ExampleDialog);and the ExampleDialog template is:
<my-comp></my-comp>I've added both ExampleDialog and MyComp components to the EntryPoints array? I've also tried opening the ExampleDialog with:
this.dialog.open(ExampleDialog, {
data: {
component: MyComp,
}
})I can use MyComp in other components??
I can also open MyComp as a dialog:
this.dialog.open(MyComp);But want to wrap it in dialog format
Hi Can anyone help? I've been going around in circles attempting to inject MatDialogRef into my Dialog component. I get the error message:
ERROR Error: Uncaught (in promise): NullInjectorError: R3InjectorError(AppModule)[MatDialogRef -> MatDialogRef -> MatDialogRef]:
NullInjectorError: No provider for MatDialogRef!
NullInjectorError: R3InjectorError(AppModule)[MatDialogRef -> MatDialogRef -> MatDialogRef]:
NullInjectorError: No provider for MatDialogRef!
at NullInjector.get (core.js:1085)
at R3Injector.get (core.js:16955)
at R3Injector.get (core.js:16955)
at R3Injector.get (core.js:16955)
at NgModuleRef$1.get (core.js:36329)
at Object.get (core.js:33972)
at getOrCreateInjectable (core.js:5848)
at Module.ɵɵdirectiveInject (core.js:21103)
at NodeInjectorFactory.Y4projectEditorComponent_Factory [as factory] (y4project-editor.component.ts:23)
... (the constructor line for Y4projectEditorComponent)When I add:
providers: [MatDialogRef],to my app.modules file I then get:
Error: Can't resolve all parameters for MatDialogRef: (?, ?).
at getUndecoratedInjectableFactory (core.js:17298)
at injectableDefOrInjectorDefFactory (core.js:17282)
at providerToFactory (core.js:17350)
at providerToRecord (core.js:17332)
at R3Injector.processProvider (core.js:17148)
at core.js:17127
at core.js:1400
at Array.forEach (<anonymous>)
at deepForEach (core.js:1400)
at R3Injector.processInjectorType (core.js:17123)Which I have less idea about. Is this refering back to the Constructor line in my Y4projectEditorComponent??
mat-menu, and have added focus/hover styles to highlight items in the menu, which is working great. The only problem is that when I first open the menu, the first menu item is automatically focused and picks up my focus styles. I don't want this behaviour. I've tried overriding the .cdk-focused, .cdk-program-focused selectors in my CSS, but this doesn't work unless I use !important, and then my focus/hover styles never show at all... Is there some way to just turn off this auto-focusing of the first item?
https://stackoverflow.com/questions/62652454/angular-material-drag-and-drop-doesnt-work
@ViewChild(MatMenu) myMenu: MatMenu either, because the actual HTML element is private. Seems like kind of a fundamental requirement to be able to easily set the width...
import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { FontAwesomeModule } from "@fortawesome/angular-fontawesome";
import { FormsModule } from "@angular/forms";
import { HttpClientModule } from "@angular/common/http";
import { MomentModule } from "angular2-moment";
import { routing, appRoutingProviders } from "./app-routing.module";
import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";
import { LoginComponent } from "./components/login/login.component";
import { RegisterComponent } from "./components/register/register.component";
import { HomeComponent } from "./components/home/home.component";
import { UserEditComponent } from "./components/user-edit/user-edit.component";
import { UsersComponent } from "./components/users/users.component";
import { SidebarComponent } from "./components/slidebar/sidebar.component";
import { TimelineComponent } from "./components/timeline/timeline.component";
import { PublicationComponent } from "./components/publications/publication.component";
import { ProfileComponent } from "./components/profile/profile.component";
import { FollowingComponent } from "./components/following/following.component";
import { FollowedComponent } from "./components/followed/followed.component";
import { MessagesModule } from "./messages/mensages.module";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { MatDatepickerModule } from "@angular/material/datepicker";
import { MatNativeDateModule } from "@angular/material/core";
import { MatFormField, MatFormFieldModule } from "@angular/material/form-field";
import { MatInputModule } from "@angular/material/input";
import { UserService } from "./services/user.service";
import { UserGuard } from "./services/user.guard";
import { MatSelectCountryModule } from "@angular-material-extensions/select-country";
import { MatMomentDateModule } from "@angular/material-moment-adapter";
@NgModule({
declarations: [
AppComponent,
LoginComponent,
RegisterComponent,
HomeComponent,
UserEditComponent,
UsersComponent,
SidebarComponent,
TimelineComponent,
PublicationComponent,
ProfileComponent,
FollowingComponent,
FollowedComponent,
],
imports: [
BrowserModule,
AppRoutingModule,
FontAwesomeModule,
routing,
FormsModule,
HttpClientModule,
MomentModule,
MessagesModule,
BrowserAnimationsModule,
MatDatepickerModule,
MatNativeDateModule,
MatFormFieldModule,
MatInputModule,
MatSelectCountryModule,
MatMomentDateModule,
],
providers: [appRoutingProviders, UserService, UserGuard],
bootstrap: [AppComponent],
})
export class AppModule {}
newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.
export from './moment-date-adapter';
export from './moment-date-formats';
export declare class MomentDateModule {
}
export declare class MatMomentDateModule {
}
