by

Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • Jun 18 2019 18:50
    @StephenFluin banned @piotr-mamenas
pixelprogramer
@pixelprogramer
Hola buenas noches
Hello, good night, someone could help me.
BertrandMarechal
@BertrandMarechal
Hey maybe. What's up
StephenS
@S-Stephen

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 element

My 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

StephenS
@S-Stephen

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??

StephenS
@S-Stephen

Okay so I don't know why but adding the provider as follows resolves the issue:

providers: [
    {
      provide: MatDialogRef,
      useValue: []
    }
  ],

Would anyone be able to point me to the knowledge about providers that explains this?

StephenS
@S-Stephen
I now know why! I was using the component as a dialog as well as a regular component (which wasn't receiving the injectable). Therefore providing it in providers effectively empty resolved the issue. I've since removed it.
Jackyline
@Jackyline
Hi! I have a mat-grid-list question. Does anyone know a good solution for it to scale on smaller screens? Right know I use <mat-grid-list cols="15" rowHeight="{{rowheight}}" gutterSize="1px"> where rowheight is set to "125px" in ngOnInit()
I don't know how to scale it well on screens, for example, laptop because know it gets too big now
Jackyline
@Jackyline
ahh I think it depends on the cols
Nathan Garlington
@garlinto
Hello folks. I am in the process of implementing a custom overlay service using CDK Overlay. The backdrop and the content are rendered...but the overlay content renders under the backdrop. Would this be a simple CSS issue, or is there something else I should look at?
BTW I'm using ng9.1 and cdk v9.2.4.
Nathan Garlington
@garlinto
Digging into the CSS a little, the cdk-overlay-backdrop's z-index is set to 1000. So just setting my dialog's z-index to 1001 is all i needed to do.
Dan Wellman
@danwellman
Hey all, I'm using a 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?
Dan Wellman
@danwellman
Using Angular + Material 9
profeciak
@profeciak
hello I have a problem with drag and drop lib drom angular material
Dan Wellman
@danwellman
Is it not possible to turn off this first item selection with the menu? Kind of annoying but sure, OK. What about programmatically setting the width of the menu based on the width of some other element? Possible? I can't use CSS because I'm using flex layout, and the element the menu is attached to could be literally any width. Can't seem to get a reference to the elements inside the menu using @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...
Echyzen
@GuillaumeUnice
Hi anyone know whether the virtual scroll is available on both axe?
BertrandMarechal
@BertrandMarechal
I'd say yes, one way to check is to get the code they use in the example page, and make it so that it does not create lines ?
Echyzen
@GuillaumeUnice
Yeah it's the case, so I've to find another library I guess
I find that crazy CDK dimensions are exclusive
BertrandMarechal
@BertrandMarechal
just rotate all at a 90 degrees angle :P
that works, donnit ?
Echyzen
@GuillaumeUnice
Lol If only ahah
I have multiple row and column so I need on both axe not just one
matiaszanin96
@matiaszanin96
Hi, I have this error: ERROR in node_modules/@angular/material-moment-adapter/adapter/index.d.ts:12:22 - error NG6002: Appears in the NgModule.imports of AppModule, but could not be resolved to an NgModule class.
Can someone help me?
BertrandMarechal
@BertrandMarechal
what does you app module look like ?
matiaszanin96
@matiaszanin96

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 {}

I have just run "npm i @angular/material-moment-adapter " to install material-moment-adapter because I didnt have it
BertrandMarechal
@BertrandMarechal
that might be why then
is it any better ?
matiaszanin96
@matiaszanin96
no
This error is with this npm install
Bellow the error say that
This likely means that the library (@angular/material-moment-adapter) which declares MatMomentDateModule has not been processed correctly by ngcc, or is not compatible with Angular Ivy. Check if a
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.
And the index.d.ts is that
export from './moment-date-adapter';
export
from './moment-date-formats';
export declare class MomentDateModule {
}
export declare class MatMomentDateModule {
}
BertrandMarechal
@BertrandMarechal
did you restart your server after you ran the install ?
matiaszanin96
@matiaszanin96
yes
maybe try to remove your node_modules, run npm install, and see if it gets better
matiaszanin96
@matiaszanin96
I can fix it!
I install an older version
BertrandMarechal
@BertrandMarechal
ha ! :P
matiaszanin96
@matiaszanin96
Specifically 9.2.4
Thank you !
BertrandMarechal
@BertrandMarechal
yw
matiaszanin96
@matiaszanin96
I suppose the problem was that I work in Angular 9 and maybe the latest versions are for Angular 10 ... idk
BertrandMarechal
@BertrandMarechal
maybe a ng add could have worked and identified which version to add