Category: angular Material7

Angular Material 7 – Tooltip ”; Previous Next The <MatTooltip>, an Angular Directive, is used to show a material styled tooltip. In this chapter, we will showcase the configuration required to show a tooltip using Angular Material. Following is the content of the modified module descriptor app.module.ts. import { BrowserModule } from ”@angular/platform-browser”; import { NgModule } from ”@angular/core”; import { AppComponent } from ”./app.component”; import {BrowserAnimationsModule} from ”@angular/platform-browser/animations”; import {MatButtonModule,MatTooltipModule} from ”@angular/material” import {FormsModule, ReactiveFormsModule} from ”@angular/forms”; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, BrowserAnimationsModule, MatButtonModule,MatTooltipModule, FormsModule, ReactiveFormsModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } Following is the content of the modified HTML host file app.component.html. <button mat-raised-button matTooltip = “Sample Tooltip” aria-label = “Sample Tooltip”> Click Me! </button> Result Verify the result. Details Here, we”ve created a button using mat-button on hover, we”ll show a tooltip. Print Page Previous Next Advertisements ”;

Angular Material 7 – Button ”; Previous Next The <mat-button>, an Angular Directive, is used to create a button with material styling and animations. In this chapter, we will showcase the configuration required to draw a button control using Angular Material. Create Angular Application Follow the following steps to update the Angular application we created in Angular 6 – Project Setup chapter − Step Description 1 Create a project with a name materialApp as explained in the Angular 6 – Project Setup chapter. 2 Modify app.module.ts, app.component.ts, app.component.css and app.component.html as explained below. Keep rest of the files unchanged. 3 Compile and run the application to verify the result of the implemented logic. Following is the content of the modified module descriptor app.module.ts. import { BrowserModule } from ”@angular/platform-browser”; import { NgModule } from ”@angular/core”; import { AppComponent } from ”./app.component”; import {BrowserAnimationsModule} from ”@angular/platform-browser/animations”; import {MatButtonModule,MatIconModule} from ”@angular/material” import {FormsModule, ReactiveFormsModule} from ”@angular/forms”; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, BrowserAnimationsModule, MatButtonModule,MatIconModule, FormsModule, ReactiveFormsModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } Following is the content of the modified CSS file app.component.css. .tp-button-row button, .tp-button-row a { margin-right: 8px; } Following is the content of the modified HTML host file app.component.html. <div class = “example-button-row”> <button mat-button>Basic</button> <button mat-raised-button>Raised</button> <button mat-stroked-button>Stroked</button> <button mat-flat-button>Flat</button> <button mat-icon-button> <mat-icon aria-label=”Heart”>favorite</mat-icon> </button> <button mat-fab>Fab</button> <button mat-mini-fab>Mini</button> <a mat-button routerLink = “.”>Link</a> </div> Result Verify the result. Details Here, we”ve created buttons using various variants of mat-buttons. Print Page Previous Next Advertisements ”;

Angular Material 7 – SideNav ”; Previous Next The <mat-sidenav>, an Angular Directive, is used to create a side navigation bar and main content panel with material design styling and animation capabilities. <mat-sidenav-container> – Represents the main container. <mat-sidenav-content> – Represents the content panel. <mat-sidenav> – Represents the side panel. In this chapter, we will showcase the configuration required to draw a sidenav control using Angular Material. Create Angular Application Follow the following steps to update the Angular application we created in Angular 6 – Project Setup chapter − Step Description 1 Create a project with a name materialApp as explained in the Angular 6 – Project Setup chapter. 2 Modify app.module.ts, app.component.ts, app.component.css and app.component.html as explained below. Keep rest of the files unchanged. 3 Compile and run the application to verify the result of the implemented logic. Following is the content of the modified module descriptor app.module.ts. import { BrowserModule } from ”@angular/platform-browser”; import { NgModule } from ”@angular/core”; import { AppComponent } from ”./app.component”; import {BrowserAnimationsModule} from ”@angular/platform-browser/animations”; import {MatSidenavModule} from ”@angular/material” import {FormsModule, ReactiveFormsModule} from ”@angular/forms”; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, BrowserAnimationsModule, MatSidenavModule, FormsModule, ReactiveFormsModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } Following is the content of the modified CSS file app.component.css. .tp-container { position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: #eee; } .tp-section { display: flex; align-content: center; align-items: center; height: 60px; width:100px; } Following is the content of the modified HTML host file app.component.html. <mat-sidenav-container class = “tp-container”> <mat-sidenav mode = “side” opened> <section class = “tp-section”> <span>File</span> </section> <section class = “tp-section”> <span>Edit</span> </section> </mat-sidenav> <mat-sidenav-content>Main content</mat-sidenav-content> </mat-sidenav-container> Result Verify the result. Details As first, we”ve created a main container spanning the complete page. Then side nav is created using mat-sidenav and content panel using mat-sidenav-content. Print Page Previous Next Advertisements ”;

Angular Material 7 – Icons ”; Previous Next The <mat-icon>, an Angular Directive, is used to add a vector/svg based icon with material styling. In this chapter, we will showcase the configuration required to draw a icon control using Angular Material. Create Angular Application Follow the following steps to update the Angular application we created in Angular 6 – Project Setup chapter − Step Description 1 Create a project with a name materialApp as explained in the Angular 6 – Project Setup chapter. 2 Modify app.module.ts, app.component.ts, app.component.css and app.component.html as explained below. Keep rest of the files unchanged. 3 Compile and run the application to verify the result of the implemented logic. Following is the content of the modified module descriptor app.module.ts. import { BrowserModule } from ”@angular/platform-browser”; import { NgModule } from ”@angular/core”; import { AppComponent } from ”./app.component”; import {BrowserAnimationsModule} from ”@angular/platform-browser/animations”; import {MatIconModule} from ”@angular/material” import {FormsModule, ReactiveFormsModule} from ”@angular/forms”; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, BrowserAnimationsModule, MatIconModule, FormsModule, ReactiveFormsModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } Following is the content of the modified HTML host file app.component.html. <mat-icon>home</mat-icon> Result Verify the result. Details Here, we”ve created home icon using mat-icon. We”re using google material icons. Print Page Previous Next Advertisements ”;

Angular Material 7 – Table ”; Previous Next The <mat-table>, an Angular Directives, is used to create table with material design and styling. In this chapter, we will showcase the configuration required to show a Table using Angular Material. Following is the content of the modified module descriptor app.module.ts. import { BrowserModule } from ”@angular/platform-browser”; import { NgModule } from ”@angular/core”; import { AppComponent } from ”./app.component”; import {BrowserAnimationsModule} from ”@angular/platform-browser/animations”; import {MatTableModule} from ”@angular/material” import {FormsModule, ReactiveFormsModule} from ”@angular/forms”; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, BrowserAnimationsModule, MatTableModule, FormsModule, ReactiveFormsModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } Following is the content of the modified HTML host file app.component.html. <table mat-table [dataSource] = “dataSource” class = “mat-elevation-z8”> <ng-container matColumnDef = “name”> <th mat-header-cell *matHeaderCellDef> Dessert (100g)</th> <td mat-cell *matCellDef = “let element”> {{element.name}} </td> </ng-container> <ng-container matColumnDef = “calories”> <th mat-header-cell *matHeaderCellDef>Calories</th> <td mat-cell *matCellDef = “let element”> {{element.calories}} </td> </ng-container> <ng-container matColumnDef = “fat”> <th mat-header-cell *matHeaderCellDef>Fat (g)</th> <td mat-cell *matCellDef = “let element”> {{element.fat}} </td> </ng-container> <ng-container matColumnDef = “carbs”> <th mat-header-cell *matHeaderCellDef>Carbs (g)</th> <td mat-cell *matCellDef = “let element”> {{element.carbs}} </td> </ng-container> <ng-container matColumnDef = “protein”> <th mat-header-cell *matHeaderCellDef>Protein (g)</th> <td mat-cell *matCellDef = “let element”> {{element.protein}} </td> </ng-container> <tr mat-header-row *matHeaderRowDef = “displayedColumns”></tr> <tr mat-row *matRowDef = “let row; columns: displayedColumns;”></tr> </table> Following is the content of the modified ts file app.component.css. table { width: 100%; } Following is the content of the modified ts file app.component.ts. import {Component, Injectable} from ”@angular/core”; import {Sort} from ”@angular/material”; export interface Food { calories: number; carbs: number; fat: number; name: string; protein: number; } @Component({ selector: ”app-root”, templateUrl: ”app.component.html”, styleUrls: [”app.component.css”] }) export class AppComponent { dataSource: Food[] = [ {name: ”Yogurt”, calories: 159, fat: 6, carbs: 24, protein: 4}, {name: ”Sandwich”, calories: 237, fat: 9, carbs: 37, protein: 4}, {name: ”Eclairs”, calories: 262, fat: 16, carbs: 24, protein: 6}, {name: ”Cupcakes”, calories: 305, fat: 4, carbs: 67, protein: 4}, {name: ”Gingerbreads”, calories: 356, fat: 16, carbs: 49, protein: 4}, ]; displayedColumns: string[] = [”name”, ”calories”, ”fat”, ”carbs”,”protein”]; } Result Verify the result. Details Here, we”ve created a table. Added mat-Table and handles tr and th using mat-row and mat-header-row. Print Page Previous Next Advertisements ”;

Angular Material 7 – Tree ”; Previous Next The <mat-tree>, an Angular Directive, is used to create a tree with material styling to display hierachical data. In this chapter, we will showcase the configuration required to draw a tree using Angular Material. Following is the content of the modified module descriptor app.module.ts. import { BrowserModule } from ”@angular/platform-browser”; import { NgModule } from ”@angular/core”; import { AppComponent } from ”./app.component”; import {BrowserAnimationsModule} from ”@angular/platform-browser/animations”; import {MatTreeModule, MatIconModule, MatButtonModule} from ”@angular/material” import {FormsModule, ReactiveFormsModule} from ”@angular/forms”; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, BrowserAnimationsModule, MatTreeModule, MatIconModule, MatButtonModule, FormsModule, ReactiveFormsModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } Following is the content of the modified HTML host file app.component.html. <mat-tree [dataSource] = “dataSource” [treeControl] = “treeControl”> <mat-tree-node *matTreeNodeDef = “let node” matTreeNodeToggle matTreeNodePadding> <button mat-icon-button disabled></button> {{node.filename}} : {{node.type}} </mat-tree-node> <mat-tree-node *matTreeNodeDef = “let node;when: hasChild” matTreeNodePadding> <button mat-icon-button matTreeNodeToggle [attr.aria-label] = “”toggle ” + node.filename”> <mat-icon class = “mat-icon-rtl-mirror”> {{treeControl.isExpanded(node) ? ”expand_more” : ”chevron_right”}} </mat-icon> </button> {{node.filename}} </mat-tree-node> </mat-tree> Following is the content of the modified ts file app.component.ts. import {FlatTreeControl} from ”@angular/cdk/tree”; import {Component, Injectable} from ”@angular/core”; import {MatTreeFlatDataSource, MatTreeFlattener} from ”@angular/material/tree”; import {BehaviorSubject, Observable, of as observableOf} from ”rxjs”; export class FileNode { children: FileNode[]; filename: string; type: any; } export class FileFlatNode { constructor( public expandable: boolean, public filename: string, public level: number, public type: any) {} } const TREE_DATA = JSON.stringify({ Documents: { angular: { src: { compiler: ”ts”, core: ”ts” } }, material2: { src: { button: ”ts”, checkbox: ”ts”, input: ”ts” } } } }); @Injectable() export class FileDatabase { dataChange = new BehaviorSubject<FileNode[]>([]); get data(): FileNode[] { return this.dataChange.value; } constructor() { this.initialize(); } initialize() { const dataObject = JSON.parse(TREE_DATA); const data = this.buildFileTree(dataObject, 0); this.dataChange.next(data); } buildFileTree(obj: {[key: string]: any}, level: number): FileNode[] { return Object.keys(obj).reduce<FileNode[]>((accumulator, key) => { const value = obj[key]; const node = new FileNode(); node.filename = key; if (value != null) { if (typeof value === ”object”) { node.children = this.buildFileTree(value, level + 1); } else { node.type = value; } } return accumulator.concat(node); }, []); } } @Component({ selector: ”app-root”, templateUrl: ”app.component.html”, styleUrls: [”app.component.css”], providers: [FileDatabase] }) export class AppComponent { treeControl: FlatTreeControl<FileFlatNode>; treeFlattener: MatTreeFlattener<FileNode, FileFlatNode>; dataSource: MatTreeFlatDataSource<FileNode, FileFlatNode>; constructor(database: FileDatabase) { this.treeFlattener = new MatTreeFlattener(this.transformer, this._getLevel, this._isExpandable, this._getChildren); this.treeControl = new FlatTreeControl<FileFlatNode>(this._getLevel, this._isExpandable); this.dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener); database.dataChange.subscribe(data => this.dataSource.data = data); } transformer = (node: FileNode, level: number) => { return new FileFlatNode(!!node.children, node.filename, level, node.type); } private _getLevel = (node: FileFlatNode) => node.level; private _isExpandable = (node: FileFlatNode) => node.expandable; private _getChildren = (node: FileNode): Observable<FileNode[]> => observableOf(node.children); hasChild = (_: number, _nodeData: FileFlatNode) => _nodeData.expandable; } Result Verify the result. Details As first, we”ve created tree using mat-tree and mat-tree-node. Then, we”ve created the data source in ts file and bind it with mat-tree. Print Page Previous Next Advertisements ”;

Angular Material 7 – Grid List ”; Previous Next The <mat-grid-list>, an Angular Directive, is used to create a two dimensional view arranging cells into grid based layout. In this chapter, we will showcase the configuration required to draw a grid list control using Angular Material. Create Angular Application Follow the following steps to update the Angular application we created in Angular 6 – Project Setup chapter − Step Description 1 Create a project with a name materialApp as explained in the Angular 6 – Project Setup chapter. 2 Modify app.module.ts, app.component.ts, app.component.css and app.component.html as explained below. Keep rest of the files unchanged. 3 Compile and run the application to verify the result of the implemented logic. Following is the content of the modified module descriptor app.module.ts. import { BrowserModule } from ”@angular/platform-browser”; import { NgModule } from ”@angular/core”; import { AppComponent } from ”./app.component”; import {BrowserAnimationsModule} from ”@angular/platform-browser/animations”; import {MatGridListModule} from ”@angular/material” import {FormsModule, ReactiveFormsModule} from ”@angular/forms”; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, BrowserAnimationsModule, MatGridListModule, FormsModule, ReactiveFormsModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } Following is the content of the modified CSS file app.component.css. mat-grid-tile { background: lightblue; } Following is the content of the modified HTML host file app.component.html. <mat-grid-list cols = “4” rowHeight = “100px”> <mat-grid-tile [colspan] = “3” [rowspan] = “1”>1 </mat-grid-tile> <mat-grid-tile [colspan] = “1” [rowspan] = “2”>2 </mat-grid-tile> <mat-grid-tile [colspan] = “1” [rowspan] = “1”>3 </mat-grid-tile> <mat-grid-tile [colspan] = “2” [rowspan] = “1”>4 </mat-grid-tile> </mat-grid-list> Result Verify the result. Details As first, we”ve created grid list using mat-grid-list. Then, we”ve added content using mat-grid-tile. Print Page Previous Next Advertisements ”;

Angular Material 7 – Toggle Button ”; Previous Next The <mat-button-toggle>, an Angular Directive, is used to create a toggle or on/off button with material styling and animations. mat-button-toggle buttons can be configured to behave as radio buttons or checkboxes. Typically they are part of <mat-button-toggle-group>. In this chapter, we will showcase the configuration required to draw a button toggle control using Angular Material. Create Angular Application Follow the following steps to update the Angular application we created in Angular 6 – Project Setup chapter − Step Description 1 Create a project with a name materialApp as explained in the Angular 6 – Project Setup chapter. 2 Modify app.module.ts, app.component.ts, app.component.css and app.component.html as explained below. Keep rest of the files unchanged. 3 Compile and run the application to verify the result of the implemented logic. Following is the content of the modified module descriptor app.module.ts. import { BrowserModule } from ”@angular/platform-browser”; import { NgModule } from ”@angular/core”; import { AppComponent } from ”./app.component”; import {BrowserAnimationsModule} from ”@angular/platform-browser/animations”; import {MatButtonToggleModule, MatIconModule} from ”@angular/material” import {FormsModule, ReactiveFormsModule} from ”@angular/forms”; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, BrowserAnimationsModule, MatButtonToggleModule, MatIconModule, FormsModule, ReactiveFormsModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } Following is the content of the modified CSS file app.component.css. .tp-selected-value { margin: 15px 0; } Following is the content of the modified HTML host file app.component.html. <mat-button-toggle-group #group = “matButtonToggleGroup”> <mat-button-toggle value = “left”> <mat-icon>format_align_left</mat-icon> </mat-button-toggle> <mat-button-toggle value = “center”> <mat-icon>format_align_center</mat-icon> </mat-button-toggle> <mat-button-toggle value = “right”> <mat-icon>format_align_right</mat-icon> </mat-button-toggle> <mat-button-toggle value = “justify” disabled> <mat-icon>format_align_justify</mat-icon> </mat-button-toggle> </mat-button-toggle-group> <div class = “tp-selected-value”>Selected value: {{group.value}}</div> Result Verify the result. Details As first, we”ve created a toggle button group using mat-button-toggle-group. Then, we”ve added toggle buttons to the group using mat-button-toggle. Print Page Previous Next Advertisements ”;

Angular Material 7 – Sort Header ”; Previous Next The <mat-sort-header> and matSort, an Angular Directives, are used to add sorting capability to a table header. In this chapter, we will showcase the configuration required to show a Sort Header using Angular Material. Following is the content of the modified module descriptor app.module.ts. import { BrowserModule } from ”@angular/platform-browser”; import { NgModule } from ”@angular/core”; import { AppComponent } from ”./app.component”; import {BrowserAnimationsModule} from ”@angular/platform-browser/animations”; import {MatSortModule} from ”@angular/material” import {FormsModule, ReactiveFormsModule} from ”@angular/forms”; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, BrowserAnimationsModule, MatSortModule, FormsModule, ReactiveFormsModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } Following is the content of the modified HTML host file app.component.html. <table matSort (matSortChange) = “sortFood($event)”> <tr> <th mat-sort-header = “name”>Dessert (100g)</th> <th mat-sort-header = “calories”>Calories</th> <th mat-sort-header = “fat”>Fat (g)</th> <th mat-sort-header = “carbs”>Carbs (g)</th> <th mat-sort-header = “protein”>Protein (g)</th> </tr> <tr *ngFor = “let food of sortedFood”> <td>{{food.name}}</td> <td>{{food.calories}}</td> <td>{{food.fat}}</td> <td>{{food.carbs}}</td> <td>{{food.protein}}</td> </tr> </table> Following is the content of the modified ts file app.component.ts. import {Component, Injectable} from ”@angular/core”; import {Sort} from ”@angular/material”; export interface Food { calories: number; carbs: number; fat: number; name: string; protein: number; } @Component({ selector: ”app-root”, templateUrl: ”app.component.html”, styleUrls: [”app.component.css”] }) export class AppComponent { foods: Food[] = [ {name: ”Yogurt”, calories: 159, fat: 6, carbs: 24, protein: 4}, {name: ”Sandwich”, calories: 237, fat: 9, carbs: 37, protein: 4}, {name: ”Eclairs”, calories: 262, fat: 16, carbs: 24, protein: 6}, {name: ”Cupcakes”, calories: 305, fat: 4, carbs: 67, protein: 4}, {name: ”Gingerbreads”, calories: 356, fat: 16, carbs: 49, protein: 4}, ]; sortedFood: Food[]; constructor() { this.sortedFood = this.foods.slice(); } sortFood(sort: Sort) { const data = this.foods.slice(); if (!sort.active || sort.direction === ””) { this.sortedFood = data; return; } this.sortedFood = data.sort((a, b) => { const isAsc = sort.direction === ”asc”; switch (sort.active) { case ”name”: return compare(a.name, b.name, isAsc); case ”calories”: return compare(a.calories, b.calories, isAsc); case ”fat”: return compare(a.fat, b.fat, isAsc); case ”carbs”: return compare(a.carbs, b.carbs, isAsc); case ”protein”: return compare(a.protein, b.protein, isAsc); default: return 0; } }); } } function compare(a: number | string, b: number | string, isAsc: boolean) { return (a < b ? -1 : 1) * (isAsc ? 1 : -1); } Result Verify the result. Details Here, we”ve created a table. Added matSort and handles its matSortChange event. Print Page Previous Next Advertisements ”;

Angular Material 7 – Ripples ”; Previous Next The <mat-ripple>, an Angular Directive, is used to define an area depicting the user interaction. In this chapter, we will showcase the configuration required to draw a ripple effect using Angular Material. Following is the content of the modified module descriptor app.module.ts. import { BrowserModule } from ”@angular/platform-browser”; import { NgModule } from ”@angular/core”; import { AppComponent } from ”./app.component”; import {BrowserAnimationsModule} from ”@angular/platform-browser/animations”; import {MatRippleModule, MatCheckboxModule, MatInputModule} from ”@angular/material” import {FormsModule, ReactiveFormsModule} from ”@angular/forms”; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, BrowserAnimationsModule, MatRippleModule, MatCheckboxModule, MatInputModule, FormsModule, ReactiveFormsModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } Following is the content of the modified HTML host file app.component.html. <mat-checkbox [(ngModel)] = “centered” class = “tp-ripple-checkbox”>Centered</mat-checkbox> <mat-checkbox [(ngModel)] = “disabled” class = “tp-ripple-checkbox”>Disabled</mat-checkbox> <mat-checkbox [(ngModel)] = “unbounded” class = “tp-ripple-checkbox”>Unbounded</mat-checkbox> <section> <mat-form-field class = “tp-ripple-form-field”> <input matInput [(ngModel)] = “radius” type = “number” placeholder = “Radius”> </mat-form-field> <mat-form-field class = “tp-ripple-form-field”> <input matInput [(ngModel)] = “color” type = “text” placeholder = “Color”> </mat-form-field> </section> <div class = “tp-ripple-container mat-elevation-z4” matRipple [matRippleCentered] = “centered” [matRippleDisabled] = “disabled” [matRippleUnbounded] = “unbounded” [matRippleRadius] = “radius” [matRippleColor] = “color”> Click me </div> Following is the content of the modified CSS file app.component.css. .tp-ripple-container { cursor: pointer; text-align: center; width: 300px; height: 300px; line-height: 300px; user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: transparent; } .tp-ripple-checkbox { margin: 6px 12px 6px 0; } .tp-ripple-form-field { margin: 0 12px 0 0; } Following is the content of the modified ts file app.component.ts. import { Component } from ”@angular/core”; @Component({ selector: ”app-root”, templateUrl: ”./app.component.html”, styleUrls: [”./app.component.css”] }) export class AppComponent { title = ”materialApp”; centered = false; disabled = false; unbounded = false; radius: number; color: string; } Result Verify the result. Details As first, we”ve created check boxes using mat-checkbox and bind them using ngModel with variables. These properties will be used to customize the ripple. Then, we”ve created the ripple and showcased its various attributes bound with variables in .ts file. Print Page Previous Next Advertisements ”;