View deployment at https://gagandeep39.github.io/angular-fitness-tracker/
ng add @angular/material
- Create a separate module for importing all matrial components
@NgModule({
imports: [MatButtonModule],
exports: [MatButtonModule],
})
export class MaterialDemoModule {}
- Import the module in main module
imports: [MaterialDemoModule]
- Start using button module inside the code
<button mat-button>Basic</button>
NOTE To prevent errors on importing a material module, Restart the server after importing a new material module or try running npm install
fxLayout="row"
All elements are on a same rowfxLayout="column"
All elements are on different linefxLayout
All elements are on diferent line (Column behaviour)
- Allows connecting angular app to firebase with complete integration
- Uses Observable based data streams
- Install using
ng add @angular/fire
- Inernaly manages token while sending/recieving requests from server
- Execution of certain Event (button click)
- State change even execition
- Emitting an event using rxjs (Observable)
- Listen to event (Subscription)
- Update UI
- Central store to store something
- Consists of action, reducer, store
- We dispatch action to modify reducer state
- Installing
- Automatic configuratin
ng add @ngrx/store@latest
- Manual
npm install @ngrx/store --save
- Automatic configuratin
- Create an initial state
const initialState = {
isLoading: false,
};
- Create a reducer
export function appReducer(state = initialState, action) {
switch (action.type) {
case 'START_LOADING':
return {
isLoading: true,
};
case 'STOP_LOADING':
return {
isLoading: false,
};
default:
return state;
}
}
3.Imprort it in app.module
import { StoreModule } from '@ngrx/store';
import { appReducer } from './app.reducer';
@NgModule({
imports: [
StoreModule.forRoot({ ui: appReducer }),
]
})
- Use it in actual code