My goal is to divide a component into three separate sections. To achieve this, I created a new component along with its template. However, now I am facing the challenge of including these child components into the main component in order to ensure that the selectors for the children work properly.
I recently discovered that using component directives for this purpose is no longer recommended and that I should utilize NgModule instead. The issue is, I am unsure of how to implement it within my current setup - the NgModule is located in the main file while my component resides in a different file. In an attempt to resolve this confusion, I attempted to create a new NgModule (although I am uncertain if this approach is valid) as shown below:
@NgModule({
declarations: [
ForgotPasswordComponent,
],
bootstrap: [Login]
})
@Component({
selector: 'login',
styleUrls: [ './login.style.scss' ],
templateUrl: './login.template.html',
encapsulation: ViewEncapsulation.None,
host: {
class: 'login-page app'
}
})
export class Login {
...
}
Despite my efforts, I suspect that there may be a small syntax error causing this complication, but I have not been able to identify it yet.