Creating the PhoneBook Component
Create a phonebook folder inside src/app/main folder and add a new typescript file (phonebook.component.ts) in the phonebook folder as shown below:
We inherited from AppComponentBase which provides some common functions and fields (like localization and access control) for us. It's not required, but makes our job easier.
As we declared in phonebook.component.ts we should create a phonebook.component.html view in the same phonebook folder:
l (lower case 'L') function comes from AppComponentBase and used to easily localize texts. [@routerTransition] attribute is required for page transition animation.
Now we should create a phonebook.module.ts and phonebook-routing.module.ts view in the same phonebook folder:
phonebook-routing.module.ts
phonebook.module.ts
Now, we can refresh the page to see the new added page:
Note: Angular-cli automatically re-compiles and refreshes the page when any changes made to any file in the application.