I have a app.component.ts, which is my main component.
There is his app-routing.module.ts, which by default takes you to a "CalibrationComponent" page.
app.component.html
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-collapse">
<ul class="nav navbar-nav">
<li routerLinkActive="active"><a routerLink="auth">Authentification</a></li>
<li routerLinkActive="active"><a routerLink="appareils">Appareils</a></li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-xs-12">
<router-outlet></router-outlet>
</div>
</div>
</div>
My calibration.component.html looks like this:
<p> Calibration works !</p>
<!-- Modal -->
<ng-template #content >
<div class="modal-header">
<h4 class="modal-title" id="modal-basic-title">Profile update</h4>
</div>
<div class="modal-body">
<p> Header body</p>
</div>
<div class="modal-footer">
<p> Header footer</p>
</div>
</ng-template>
<div class="calibrationDiv" *ngIf="startCalibration" >
<input type="button" class="Calibration" id="Pt1">
<input type="button" class="Calibration" id="Pt2">
<input type="button" class="Calibration" id="Pt3">
<input type="button" class="Calibration" id="Pt4">
<input type="button" class="Calibration" id="Pt5">
<input type="button" class="Calibration" id="Pt6">
<input type="button" class="Calibration" id="Pt7">
<input type="button" class="Calibration" id="Pt8">
<input type="button" class="Calibration" id="Pt9">
</div>
And my calibration.component.ts looks like this:
import { Component, Input, ViewChild, AfterViewInit } from '#angular/core';
import { NgbModal, ModalDismissReasons } from '#ng-bootstrap/ng-bootstrap';
#Component({
selector: 'app-calibration',
templateUrl: './calibration.component.html',
styleUrls: ['./calibration.component.scss']
})
export class CalibrationComponent implements AfterViewInit {
#Input() startCalibration: boolean = true;
#ViewChild("content") content: any;
constructor(private modalService: NgbModal) { }
ngAfterViewInit(): void {
this.modalService.open(this.content);
};
}
When I go to my Calibration component (this is the default route), my modal doesn't show up. Do you know why?
Thanks.
I fixed it.
I had the nodemodule bootstrap 3.7, which is not compatible with ng-bootstrap. I had to upgrade bootstrap to 4.0 and now everything works.
Thanks.
Related
I am adding pseron name and username into session after successfull login. After login I redirect user to next component. I have shown person name in header which is common for all components. It is not showing person name in header after login. I have to refresh page and then it shows new value of session
Header Component Coding
import { useEffect, useState } from "react";
import { Link, NavLink, useNavigate } from "react-router-dom";
var Header=()=>
{
const [pname,setpname] = useState();
useEffect(()=>
{
if(sessionStorage.getItem("pname")!=null)
{
setpname(sessionStorage.getItem("pname"));
}
else
{
setpname("Guest");
}
},[pname])
return(
<div>
<div className="agileits_header">
<div className="container">
<div className="w3l_offers">
<p>Welcome {pname}</p>
</div>
<div className="agile-login">
<ul>
<li><Link to="/register"> Register </Link></li>
<li><Link to="/login">Login</Link></li>
</ul>
</div>
<div className="product_list_header">
<form action="#" method="post" className="last">
<input type="hidden" name="cmd" value="_cart"/>
<input type="hidden" name="display" value="1"/>
<button className="w3view-cart" type="submit" name="submit" value=""><i className="fa fa-cart-arrow-down" aria-hidden="true"></i></button>
</form>
</div>
<div className="clearfix"> </div>
</div>
</div>
<div className="logo_products">
<div className="container">
<div className="w3ls_logo_products_left1">
<ul className="phone_email">
<li><i className="fa fa-phone" aria-hidden="true"></i>Order online or call us : (+0123) 234 567</li>
</ul>
</div>
<div className="w3ls_logo_products_left">
<h1>super Market</h1>
</div>
<div className="w3l_search">
<form action="#" method="post">
<input type="search" name="Search" placeholder="Search for a Product..." required=""/>
<button type="submit" className="btn btn-default search" aria-label="Left Align">
<i className="fa fa-search" aria-hidden="true"> </i>
</button>
<div className="clearfix"></div>
</form>
</div>
<div className="clearfix"> </div>
</div>
</div>
<div className="navigation-agileits">
<div className="container">
<nav className="navbar navbar-default">
<div className="navbar-header nav_2">
<button type="button" className="navbar-toggle collapsed navbar-toggle1" data-toggle="collapse" data-target="#bs-megadropdown-tabs">
<span className="sr-only">Toggle navigation</span>
<span className="icon-bar"></span>
<span className="icon-bar"></span>
<span className="icon-bar"></span>
</button>
</div>
<div className="collapse navbar-collapse" id="bs-megadropdown-tabs">
<ul className="nav navbar-nav">
<li className="active"><NavLink to="/home" className="act">Home</NavLink></li>
<li>Contact</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
)
}
export default Header;
Login Page Coding
import { useState } from "react";
import { useNavigate } from "react-router-dom";
var Login=()=>
{
const [uname,setuname] = useState("");
const [pass,setpass] = useState("");
const [msg,setmsg] = useState("");
const mynavigate = useNavigate();
function onlogin()
{
fetch(`http://localhost:5000/api/login?username=${uname}&pass=${pass}`)
.then(resp=>resp.json())
.then(result=>
{
if(result.statuscode===1)
{
sessionStorage.setItem("pname",result.data.name)
sessionStorage.setItem("uname",result.data.username)
if(result.data.usertype=="admin")
{
mynavigate("/adminpanel");
}
else
{
mynavigate("/home");
}
}
else
{
setmsg("Wrong Username/Password");
}
}).catch((err)=>
{
console.log(err);
setmsg("Error Occured");
})
}
return(
<div>
<div className="breadcrumbs">
<div className="container">
<ol className="breadcrumb breadcrumb1 animated wow slideInLeft" data-wow-delay=".5s">
<li><span className="glyphicon glyphicon-home" aria-hidden="true"></span>Home</li>
<li className="active">Login Page</li>
</ol>
</div>
</div>
<div className="login">
<div className="container">
<h2>Login Form</h2>
<div className="login-form-grids animated wow slideInUp" data-wow-delay=".5s">
<input type="email" onChange={(e)=>setuname(e.target.value)} placeholder="Email Address" required=" " />
<input type="password" onChange={(e)=>setpass(e.target.value)} placeholder="Password" required=" " />
<input type="submit" value="Login" onClick={onlogin}/><br/>
{msg}
</div>
<h4>For New People</h4>
<p>Register Here (Or) go back to Home<span className="glyphicon glyphicon-menu-right" aria-hidden="true"></span></p>
</div>
</div>
</div>
)
}
export default Login;
App.js Coding
import './App.css';
import Header from './components/Header';
import Footer from './components/Footer';
import SiteRoutes from './components/SiteRoutes';
function App() {
return (
<div>
<Header/>
<SiteRoutes/>
<Footer/>
</div>
);
}
export default App;
I have tried various options and also tried to give refresh coding in header. But it gets into infinite loop. I also tried . But it is of no use. I think router command is not available in v6. I have also tried useEffect without dependency of pname, just with empty square brackets[]
I am making a blogpost app using Angular and REST service. I need to have an edit and delete functionality in the application and this is what I have done for it
Component Code :
export class EditblogsComponent implements OnInit {
allBlogs: any;
constructor(private http: HttpClient) {}
ngOnInit(): void {
this.http.get('http://localhost:3000/blogPosts').subscribe(
(data) => {
this.allBlogs = data as string[];
},
(err: HttpErrorResponse) => {
console.log(err.message);
}
);
}
editBlog() {}
deleteBlog() {}
}
HTML code
<div class="container">
<div class="row">
<div class="col-md-10">
<div class="card border-primary" *ngFor="let blog of allBlogs">
<div class="card-body">
<div class="card-title">
<h1>
{{blog.blogTitle}}
</h1>
</div>
<div class="card-text text-left">
{{blog.blogContent}}
</div>
</div>
<footer class="blockquote-footer">
<blockquote class="blockquote mb-0 text-end">
Written by : {{blog.blogUser}}
</blockquote>
</footer>
<div class="row button-row">
<div class="col-sm-2">
<button class="btn btn-primary" (click)="editBlog()">Edit
blog</button>
</div>
<div class="col-sm-2">
<button class="btn btn-primary" (click)="deleteBlog()">Delete
blog</button>
</div>
</div>
</div>
<br>
</div>
<br>
</div>
<br>
</div>
JSON Server for the blog section:
"blogPosts": [
{
"blogUser": "usera",
"blogTitle": "Title for first blogppost",
"blogContent": "Content of first blogpost",
"id": 1
},
{
"blogUser": "usera",
"blogTitle": "Title for second blogppost",
"blogContent": "Content of second blogpost",
"id": 2
}
],
I want to know how I can bind the edit and delete buttons so that they work on the specific blog that renders in the cards.
Provide the blog or it's id as an argument to the functions.
html
<div class="row button-row">
<div class="col-sm-2">
<button class="btn btn-primary" (click)="editBlog(blog)">Edit
blog</button>
</div>
<div class="col-sm-2">
<button class="btn btn-primary" (click)="deleteBlog(blog.id)">Delete
blog</button>
</div>
</div>
component
editBlog(blog: Blog) {}
deleteBlog(blogId: number) {}
Send the specific 'blog' object as an argument to the edit and delete methods like so:
HTML:
<div class="row button-row">
<div class="col-sm-2">
<button class="btn btn-primary" (click)="editBlog(blog)">Edit
blog</button>
</div>
<div class="col-sm-2">
<button class="btn btn-primary" (click)="deleteBlog(blog)">Delete
blog</button>
</div>
</div>
TS:
editBlog(blog:any)
{
}
deleteBlog(blog:any)
{
}
I created an angular project that takes some data(as issue) dynamically and stored as card in a component(issues component). If I click on a particular card, it navigates to issue-details component where entire details of an issue should be shown. Now, I have to create a chart that should display top viewed issues. How can I do this? I am a beginner to Angular.
Any help can be appreciated.
Thanks in advance.
issues.component.html:
<h3 *ngIf="default" class="mt-5" style="text-align: center">There is nothing to show. Please raise issue by clicking "Add New" button.</h3>
<app-update (upevent)="upd8=$event" *ngIf="upd8" [ID]="uid"></app-update>
<div *ngIf="!upd8">
<div class="card-group">
<div class="card">
<div class="card-header bg-white">
<button class="btn btn-light" (click)="customtoggle()">Customise</button>
</div>
<div class="card-body" *ngIf="customClicked">
<form #customForm="ngForm">
<h6 class="card-title align-right">Customise View</h6>
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="item1" name="customitem" [(ngModel)]="isCD">
<label class="form-check-label" for="item1">Created Date</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="item2" name="customitem" [(ngModel)]="isDes">
<label class="form-check-label" for="item2">Description</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="item3" name="customitem" [(ngModel)]="isSeverity">
<label class="form-check-label" for="item3">Severity</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="item4" name="customitem" [(ngModel)]="isStatus">
<label class="form-check-label" for="item4">Status</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="item5" name="customitem" [(ngModel)]="isRD">
<label class="form-check-label" for="item5">Resolved Date</label>
</div>
</div>
</form>
</div>
</div>
<div class="card text-right">
<div class="card-header bg-white">
<button class="btn btn-light" (click)="filtertoggle()">Filter</button>
</div>
<div class="card-body" *ngIf="filterClicked">
<form #filterForm="ngForm">
<h6 class="card-title align-right">Severity Filter</h6>
<div class="form-group">
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" id="sevfilter1" name="sevfilter" value="Minor" [(ngModel)]="sevfilter">
<label class="form-check-label" for="sevfilter1">Minor</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" id="sevfilter2" name="sevfilter" value="Major" [(ngModel)]="sevfilter">
<label class="form-check-label" for="sevfilter2">Major</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" id="sevfilter3" name="sevfilter" value="Critical" [(ngModel)]="sevfilter">
<label class="form-check-label" for="sevfilter3">Critical</label>
</div>
</div>
<h6 class="card-title align-right">Status Filter</h6>
<div class="form-group">
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" id="stafilter1" name="stafilter" value="Open" [(ngModel)]="stafilter">
<label class="form-check-label" for="stafilter1">Open</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" id="stafilter2" name="stafilter" value="In Progress" [(ngModel)]="stafilter">
<label class="form-check-label" for="stafilter2">In Progress</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" id="stafilter3" name="stafilter" value="Resolved" [(ngModel)]="stafilter">
<label class="form-check-label" for="stafilter3">Resolved</label>
</div>
</div>
</form>
</div>
</div>
</div>
<div *ngFor="let issue of issues" class="mt-1">
<div *ngIf="issue.Id != 0">
<div class="card" *ngIf="(issue.Severity == sevfilter || sevfilter == 'none') && (issue.Status == stafilter || stafilter == 'none')">
<div class="card-header" style="background-color: #563D7C">
<div class="row">
<div class="col-md-8">
<strong class="nav-link text-white">Issue ID: {{issue.Id}}</strong>
</div>
<div class="col-md-2">
<button type="button" (click)="update(issue)" class="nav-link btn text-white btn-primary float-right">Update</button>
</div>
<div class="col-md-2">
<button type="button" (click)="delete(issue.Id)" class="nav-link btn btn-danger float-right">Delete</button>
</div>
</div>
</div>
<div class="card-body" style="background-color: #E1D3F7">
<ul class="list-group">
**<a [routerLink]="['/issuesdetail',issue.CreatedDate,issue.Description,issue.Severity,issue.Status,issue.ResolvedDate]" routerLinkActive="active">**
`This is the line where it routes to issue-detail component and displays particular issue`
<li class="list-group-item" *ngIf="isCD"><strong>Created Date: </strong>{{issue.CreatedDate}}</li>
<li class="list-group-item" *ngIf="isDes"><strong>Description: </strong>{{issue.Description}}</li>
<li class="list-group-item" *ngIf="isSeverity"><strong>Severity: </strong>{{issue.Severity}}</li>
<li class="list-group-item" *ngIf="isStatus"><strong>Status: </strong>{{issue.Status}}</li>
<li class="list-group-item" *ngIf='issue.Status == "Resolved" && isRD'><strong>Resolved Date: </strong>{{issue.ResolvedDate}}</li>
</a> </ul>
</div>
</div>
</div>
</div>
</div>
issues.component.ts:
import { Component, OnInit } from '#angular/core';
import { LocaljsonService } from '../localjson.service';
import { NavigationExtras, Router } from 'node_modules/#angular/router';
#Component({
selector: 'app-issues',
templateUrl: './issues.component.html',
styleUrls: ['./issues.component.css']
})
export class IssuesComponent implements OnInit {
constructor(private _localjsonService: LocaljsonService, private _router: Router){
}
issues: any;
default: boolean;
upd8 = false;
uid: any;
customClicked = false;
filterClicked = false;
isCD = true;
isDes = true;
isSeverity = true;
isStatus = true;
isRD = true;
stafilter = 'none';
sevfilter = 'none';
ngOnInit() {
this.issues = this._localjsonService.getJSON();
if (this.issues.length < 2) {
this.default = true;
} else {
this.default = false;
}
console.log(this.calls);
}
customtoggle() {
this.customClicked = !this.customClicked;
}
filtertoggle() {
this.filterClicked = !this.filterClicked;
}
update(id: any) {
this.upd8 = true;
this.uid = id;
}
delete(id: any) {
for (let i = 1; i < this.issues.length; i++) {
if ( this.issues[i].Id === id ) {
this.issues.splice(i, 1);
}
}
this._localjsonService.setJSON(this.issues);
if (this.issues.length < 2) {
// this._router.navigate(['/issues']);
this.default = true;
}
}
}
issue-detail.component.ts:
import { Component, OnInit } from '#angular/core';
import { ActivatedRoute, Router, Params } from '#angular/router';
import { Location } from "#angular/common";
import { LocaljsonService } from '../localjson.service';
import { AddnewComponent } from '../addnew/addnew.component';
import { count } from 'rxjs/operators';
#Component({
selector: 'app-issue-detail',
templateUrl: './issue-detail.component.html',
styleUrls: ['./issue-detail.component.css']
})
export class IssueDetailComponent implements OnInit {
description!:any;
createdDate!:string;
resolvedDate!:string;
severity!:string;
status!:string;
constructor(private route: ActivatedRoute, private router: Router,
private _localjsonService:LocaljsonService) {
}
ngOnInit(): void {
this.route.paramMap.forEach((params: Params) => {
console.log(params);
this.createdDate=params.get("CreatedDate");
this.description=params.get("Description");
console.log(this.description);
this.severity=params.get("Severity");
this.status=params.get("Status");
this.resolvedDate=params.get("ResolvedDate");
});
}
goBack(description:string): void {
// Query Parameter Approach
this.router.navigate(['/issues'], {queryParams: {viewedid: this.description}});
}
}
issue-detail.component.html:
<div>
<h2>Issue Details</h2>
<div class="card mx-auto" >
<div class="des">
<ul class="list-group">
<li class="list-group-item"><strong>Created Date: </strong>{{createdDate}}</li>
<li class="list-group-item"><strong>Description: </strong>{{description}}</li>
<li class="list-group-item"><strong>Severity: </strong>{{severity}}</li>
<li class="list-group-item"><strong>Status: </strong>{{status}}</li>
<li class="list-group-item"><strong>Resolved Date: </strong>{{resolvedDate}}</li>
</ul>
<a class="btn btn-primary" href="#" role="button" (click)="goBack(description.value)">Back</a>
</div>
</div>
</div>
issue-tracker.component.ts:(this is the root module)
<nav class="navbar navbar-expand-lg sticky-top navbar-dark navbar-fixed-top">
<a class="navbar-brand" routerLink='/about'><strong>Issue Tracker</strong></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" routerLink='/about' routerLinkActive='active'>About</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink='/issues' routerLinkActive='active'>View-Issue-List</a>
</li>
</ul>
<a class="nav-link btn btn-primary float-right" role="button" routerLink='/addnew' routerLinkActive='active'>Add New</a>
</div>
</nav>
<div class="container">
<router-outlet></router-outlet>
</div>
I'm converting my project from JS to TS and I don't know why I cannot call "this" here.
<template>
<transition name="modal">
<div class="modal-mask">
<div class="modal-wrapper">
<div class="modal-container">
<div class="modal-body">
<div class="text-right">
<label>
<span>
<v-icon name="times" scale="1.5" />
<button
#click="closeModal"
type="button"
class="btn btn-sm btn-outline-info btn-block"
style="display: none"
>
Cancel
</button>
</span>
</label>
</div>
<h4 class="text-center title-switch">
<span style="font-weigth: bold">{{ title }}</span
>リストに追加しますか？
</h4>
<div class="d-flex justify-content-center align-items-center mb-2">
<button #click="closeModal" class="btn btn-no mr-5">No</button>
<button #click="getDate" class="btn btn-yes">Yes</button>
</div>
</div>
</div>
</div>
</div>
</transition>
</template>
<script lang="ts">
import { Vue, Prop } from 'vue-property-decorator';
import { chatModule } from '#/store/modules/manage-chat';
export default class ModalConfirm extends Vue {
#Prop(String) readonly title!: string;
#Prop(Boolean) readonly check!: boolean;
closeModal(): void {
if (confirm('Close the window without saving?')) {
chatModule.actionChangeNgListState({
status: false,
});
this.$emit('close');
}
}
}
</script>
this is log
app.js:sourcemap:161212 TypeError: Cannot read property '$emit' of null
In other file, I can still use "this" is method, but in this method I can not
[SOLVED] : I have already solved my problem.
It caused because I forgot add this decorator #Component({}).
So pls add this when you caught this problem.
I am working on Angular 2 project with following file structure.
HeaderComponent.ts
AppComponent.ts
Page1Component.ts
Page2Component.ts
I have following template in my HeaderComponent.ts
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a [routerLink]="['']">Home</a></li>
<li><a [routerLink]="['/page1']" >Page1</a></li>
<li><a [routerLink]="['/page2']">Page2</a></li>
</ul>
</div>
</div>
</nav>
with following routes in my AppComponent
#Component({
selector: 'my-app',
template: `
<my-header></my-header>
<router-outlet></router-outlet>
`,
directives: [ROUTER_DIRECTIVES, HeaderComponent]
})
#Routes([
{path: '/', component: HomeComponent},
{path: '/page1', component: Page1Component}
{path: '/page2', component: Page2Component}
])
export class AppComponent {
ngAfterViewInit() {
//To show the active tab in navbar
$(".nav a").on("click", function () {
$(".nav").find(".active").removeClass("active");
$(this).parent().addClass("active");
});
}
}
and my Page1Component has following sample form
<section class="col-md-8 col-md-offset-2">
<form [ngFormModel]="myForm" (ngSubmit)="onSubmit()">
<div class="form-group">
<label for="firstName">First Name</label>
<input [ngFormControl]="myForm.find('firstName')" type="text" id="firstName" class="form-control">
</div>
<div class="form-group">
<label for="lastName">Last Name</label>
<input [ngFormControl]="myForm.find('lastName')" type="text" id="lastName" class="form-control">
</div>
<div class="form-group">
<label for="email">Mail</label>
<input [ngFormControl]="myForm.find('email')" type="email" id="email" class="form-control">
</div>
<div class="form-group">
<label for="password">Password</label>
<input [ngFormControl]="myForm.find('password')" type="password" id="password" class="form-control">
</div>
<button type="submit" class="btn btn-primary" [disabled]="!myForm.valid">Sign Up</button>
</form>
</section>
So when I click on Page1 routerLink in header <li><a [routerLink]="['/page1']">Page1</a></li>, it loads the Page1Component in <router-outlet></router-outlet>. I fill some details in form and when I click on Page1 routerLink again in header before submitting the form, I want Page1Component to reload so my form comes to initial state but it doesn't do anything on click. I tried to reset form in routerOnActivate() and routerCanDeactivate() but none of the functions being called. So basically, I want my component to load again when I click on [routerLink]
Please let me know if I can explain better.
You can take care of this scenario by using dummy route,
<a (click)="changeRoute(url)">
Add one dummy route to your router:
{ path: 'dummy', component: dummyComponent }
dummyComponent.ts
//Dummy component for route changes
#Component({
selector: 'dummy',
template: ''
})
export class dummyComponent{}
Now inside your component add changeRoute function:
changeRoute(url) {
this.router.navigateByUrl('/dummy', { skipLocationChange: true });
setTimeout(() => this.router.navigate(url));
}
// 'skipLocationChange' will avoid /dummy to go into history API
This will re render your component and rest all will be taken care by Angular.
You could use the (click) event an navigate in code to some dummy component and then again back to the previous component. There is a parameter in router.navigate() to skip history changes so the back button keeps working with this hack.
Another approach would be to remove the routerLink, and naviagate via code:
<a (click)="gotoPage1()">
Now gotoPage1 just appends a #X number to existing url
...
count: number = 2;
gotoPage1(){
count++;
return this.router.navigate(...'#'+count);
}