Posts

Showing posts with the label bootstrap

Header, Menu and Footer Component with CSS

Image
In Previous topic we have learned angular modules and bootstrap. In this topic we will create menu and footer component for our todoList application and add some bootstrap css in it. So let's create our menu and footer component by using command "ng generate component menu",  "ng generate component header"   and "ng generate component footer" using command prompt at your project location as below: once these component are created add some hardcoded value in html files for all and then you have to add the tag name for header, menu and footer component in root component i.e. app.component.html as below and refresh your localhost. Menu Component: Now we will look into Menu Component and some link for login, logout, todos and other. For this we need to update our menu.component.html file as below, we will use router link for routing from one page to another and href for external URL. Header Component: target="_blank" will open the link in new tab

Angular Modules, Bootstrap

Image
in Previous topic we have created our todo List for our Application, Now we can learn some concept about angular modules. Whenever we talk about angular application they are build on multiple angular modules. So you can say an angular module is a group of components, services, directives. Some of built-in modules in angular framework are BrowserModule, FormsModule, AppRoutingModule, NgModule. Whenever we want to use any angular feature we have to import that module. Like in our LoginComponent html we have used ngModel and for using ngModel we have imported FormsModule, so whenever we want to use any built-in feature of angular we need to import there corresponding modules. So we can think angular application as a group of angular modules, and each component or directives that we have created till now like LoginComponent, ErrorComponent, WelcomeComponent, todosListComponent are always associated with angular module. The Syntax for angular module will start from '@' i.e. @NgModul