I am using a template called mat-stepper in my project and it has services, router and activedroute the problem is that when I put these in the constructor the template is no longer shown, I have been investigating and I see that I should not put them there, but I don't know how to fix it Help, I'm new to this. This is my code:
Component.ts
public factory:Factory=new Factory()
firstFormGroup = this._formBuilder.group({
firstCtrl: ['', Validators.required],
});
secondFormGroup = this._formBuilder.group({
secondCtrl: ['', Validators.required],
});
constructor(private _formBuilder: FormBuilder, private factoryService:FactoryService, private router:Router,
private activateRoute:ActivatedRoute) { }
ngOnInit(): void {
this.loadfactory()
}
loadfactory():void{
this.activateRoute.params.subscribe(params=>{
let id=params['id']
if(id){
this.factoryService.getFactory(id).subscribe((factory)=>this.factory=factory)
}
})
}
public create():void{
this.factoryService.create(this.factory).subscribe(
factory=>{
this.router.navigate(['/factory'])
Swal.fire('Factory ', `${factory.name} save succes`,'success')
}
)
}
}```
**Html**
``` <mat-stepper #stepper ngNativeValidate (ngSubmit)="create()">
<mat-step [stepControl]="firstFormGroup" errorMessage="All fields are required">
<form [formGroup]="firstFormGroup">
<ng-template matStepLabel>Enterprise data</ng-template>
<mat-form-field appearance="fill">
<mat-label >Name</mat-label>
<input matInput [(ngModel)]="factory.name" formControlName="firstCtrl" required>
</mat-form-field>
<mat-form-field appearance="fill">
<mat-label>Ciudad</mat-label>
<input matInput [(ngModel)]="factory.city" formControlName="firstCtrl" required>
</mat-form-field>
<mat-form-field appearance="fill">
<mat-label>Address</mat-label>
<input matInput [(ngModel)]="factory.address" formControlName="firstCtrl" required>
</mat-form-field>
<mat-form-field appearance="fill">
<mat-label>Phone</mat-label>
<input matInput [(ngModel)]="factory.phone" formControlName="firstCtrl" required>
</mat-form-field>
<mat-form-field appearance="fill">
<mat-label>Postal Code</mat-label>
<input matInput [(ngModel)]="factory.postal_code" formControlName="firstCtrl" required>
</mat-form-field>
<mat-form-field appearance="fill">
<mat-label>Email</mat-label>
<input matInput [(ngModel)]="factory.email" formControlName="firstCtrl" required>
</mat-form-field>
<mat-form-field appearance="fill">
<mat-label>Description</mat-label>
<textarea matInput [(ngModel)]="factory.description" required></textarea>
</mat-form-field>
<div>
<button mat-button matStepperNext>Next</button>
</div>
</form>
</mat-step>
<mat-step [stepControl]="secondFormGroup" errorMessage="All fields are required.">
<form [formGroup]="secondFormGroup">
<ng-template matStepLabel>Person in charge</ng-template>
<mat-form-field appearance="fill">
<mat-label>Name</mat-label>
<input matInput formControlName="secondCtrl"
required>
</mat-form-field>
<mat-form-field appearance="fill">
<mat-label>Last Name</mat-label>
<input matInput formControlName="secondCtrl"
required>
</mat-form-field>
<mat-form-field appearance="fill">
<mat-label>Email</mat-label>
<input matInput formControlName="secondCtrl"
required>
</mat-form-field>
<mat-form-field appearance="fill">
<mat-label>Address</mat-label>
<input matInput formControlName="secondCtrl"
required>
</mat-form-field>
<mat-form-field appearance="fill">
<mat-label>Phone</mat-label>
<input matInput formControlName="secondCtrl"
required>
</mat-form-field>
<div>
<p>Before saving, check that the data is correct.</p>
<button mat-button matStepperPrevious>Back</button>
<button mat-button matStepperNext>Next</button>
</div>
</form>
</mat-step>
<mat-step>
<ng-template matStepLabel>Terminate</ng-template>
<p>Thank you</p>
<div>
<button mat-button matStepperPrevious>Back</button>
<button mat-button (click)="stepper.reset()">Delete</button>
<button id="submit" mat-raised-button type="submit" color="primary">Save</button>
</div>
</mat-step>
</mat-stepper>```