Skip to content

Instantly share code, notes, and snippets.

BetterProgramming

Block or report user

Report or block BetterProgramming

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
View app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {
MatButtonModule,
MatCheckboxModule,
MatInputModule,
MatMenuModule,
MatSidenavModule,
MatToolbarModule,
MatTableModule,
View contact.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { environment } from 'src/environments/environment';
@Injectable({
providedIn: 'root'
})
export class ContactService {
constructor(
private http: HttpClient
) { }
View app.component.scss
#content {
padding: 20px;
min-height: 130vh;
}
ul {
list-style-type: none;
margin: 0;
li {
padding: 20px 5px;
}
View app.component.html
<mat-sidenav-container class="example-container">
<mat-sidenav mode="side" [opened]='menuOpen'>
<ul>
<li>
<b>
Template Driven Address Book
</b>
</li>
<li>
<a routerLink='/'>Home</a>
View app-routing.module.ts
import { Component, HostListener } from '@angular/core';
import { Store, select } from '@ngrx/store';
import { TOGGLE_MENU } from './reducers/menu-reducer';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
menuOpen: boolean;
View top-bar.component.html
<mat-toolbar>
<a (click)='toggleMenu()' class="menu-button">
<i class="material-icons">
menu
</i>
</a>
Template Driven Address Book
</mat-toolbar>
View app-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomePageComponent } from './home-page/home-page.component';
import { ContactFormPageComponent } from './contact-form-page/contact-form-page.component';
const routes: Routes = [
{ path: '', component: HomePageComponent },
{ path: 'contact', component: ContactFormPageComponent }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
View index.ts
import { menuReducer } from './menu-reducer';
import { contactsReducer } from './contacts-reducer';
export const reducers = {
menu: menuReducer,
contacts: contactsReducer
};
View menu-reducer.ts
const TOGGLE_MENU = 'TOGGLE_MENU';
function menuReducer(state, action) {
switch (action.type) {
case TOGGLE_MENU:
state = action.payload;
return state;
default:
return state
}
}
View contacts-reducer.ts
const SET_CONTACTS = 'SET_CONTACTS';
function contactsReducer(state, action) {
switch (action.type) {
case SET_CONTACTS:
state = action.payload;
return state;
default:
return state
}
}
You can’t perform that action at this time.