I am currently utilizing the RC5 ngModule in my Angular project.
In my app.module.ts file, the import statements and module setup are as follows:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { IndexComponent } from './index.component';
import {RouterModule} from '@angular/router';
import {MdMenuModule} from '@angular2-material/menu';
import {MdIconModule} from '@angular2-material/icon';
import {MdSidenavModule} from '@angular2-material/sidenav';
import {MdToolbarModule} from '@angular2-material/toolbar';
@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
MdMenuModule,
MdIconModule,
MdSidenavModule,
MdToolbarModule,
RouterModule.forRoot([
{path: '', component: IndexComponent},
{path: 'profile', loadChildren: './app/profile/profile.module'}
])
],
bootstrap: [AppComponent],
})
export class AppModule {}
The profile.module.ts file includes the necessary imports for creating a new profile component:
import {RouterModule} from '@angular/router';
import {NgModule} from '@angular/core';
import NewProfileComponent from './new.profile.component';
import { ReactiveFormsModule } from '@angular/forms';
import ProfileService from './profile.service';
import {MdInputModule} from '@angular2-material/input';
import {MdCardModule} from '@angular2-material/card';
import {MdButtonModule} from '@angular2-material/button';
@NgModule({
declarations: [ NewProfileComponent ],
imports: [
MdInputModule,
MdCardModule,
ReactiveFormsModule,
MdButtonModule,
RouterModule.forChild([
{ path: 'new', component: NewProfileComponent },
])
],
providers: [
ProfileService
]
})
export default class ProfileModule {}
Here is the code from the new.profile.component.ts file which handles the creation of a new profile:
///<reference path="../../node_modules/@angular/core/src/metadata/lifecycle_hooks.d.ts"/>
import {Component, OnInit} from '@angular/core';
import ProfileService from './profile.service';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
@Component({
selector: 'new-profile-app',
templateUrl: './app/profile/new.profile.html'
})
export default class NewProfileComponent implements OnInit{
public registerForm: FormGroup;
constructor(private formBuilder: FormBuilder, private service: ProfileService) {}
ngOnInit():any{
this.registerForm = this.formBuilder.group({
name: ['', Validators.required],
email: ['', Validators.required],
password: ['', Validators.required],
});
}
public save(data: any){
if(this.registerForm.invalid){
return;
}
this.service.create(data)
.subscribe(function (response: any) {
console.debug(response);
})
}
}
However, I am encountering a compilation error when using *ngIf in the template of the NewProfileComponent. The error states: Can't bind to 'ngIf' since it isn't a known property of 'p'
Do you have any ideas on how to resolve this issue?