Currently working on developing a dialog component in Angular 17 using Angular Material 17
Encountering an issue inside the constructor of the dialog component where utilizing the @Inject decorator as shown in the official documentation example is not possible
import { Component, Inject } from '@angular/core';
import { MatDialog, MatDialogRef } from '@angular/material/dialog';
@Component({
selector: 'app-reject',
standalone: true,
imports: [MaterialModule],
templateUrl: './reject.component.html',
styleUrl: './reject.component.scss',
})
export class RejectComponent {
constructor(
@Inject(MAT_DIALOG_DATA) public data: any, //Decorators are not valid here.ts(1206)
public dialogRef: MatDialogRef<RejectComponent>,
) {}
public editorConfig = EDITOR_CONFIG;
commentFormControl = new FormControl('');
onCancel(): void {
this.dialogRef.close();
}
}
tsconfig.json
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": ".",
"outDir": "./dist/out-tsc",
"forceConsistentCasingInFileNames": true,
"strict": true,
"noImplicitOverride": true,
"noPropertyAccessFromIndexSignature": true,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true,
"sourceMap": true,
"declaration": false,
"downlevelIteration": true,
"experimentalDecorators": true,
"moduleResolution": "node",
"importHelpers": true,
"target": "ES2022",
"module": "ES2022",
"useDefineForClassFields": false,
"lib": ["ES2022", "dom"],
"paths": {},
"rootDir": "."
},
"angularCompilerOptions": {
"enableI18nLegacyMessageIdFormat": false,
"strictInjectionParameters": true,
"strictInputAccessModifiers": true,
"strictTemplates": true
},
"exclude": ["node_modules", "tmp"]
}
Angular version: 17.0.7 Material version: 17.0.4 TypeScript version: 5.2.2