import { Component, OnInit } from '#angular/core';
#Component({
selector: 'app-documents',
templateUrl: './documents.component.html',
styleUrls: ['./documents.component.less']
})
export class DocumentsComponent implements OnInit {
pdfSrc: string = '';
pdfZoom:number = 1;
constructor() { }
ngOnInit() {
this.pdfSrc = '/assets/demo.pdf';
}
public zoomIn()
{
this.pdfZoom += 0.25;
}
public zoomOut()
{
if (this.pdfZoom > 1) {
this.pdfZoom -= 0.25;
}
}
}
<div class="m-portlet m-portlet--mobile">
<div class=modal-body align="center">
<span class="input-group-btn">
<button class="btn" name="zoomout" (click)="zoomOut()"><i class="fa fa-search-minus"> </i></button>
<button class="btn" name="zoomin" (click)="zoomIn()"><i class="fa fa-search-plus"> </i></button>
</span>
</div><br>
<div class="m-portlet__body" style="overflow-x:scroll; overflow-y: scroll;max-height:75vh;">
<pdf-viewer [src]="pdfSrc" [render-text]="true" [original-size]="false" [zoom]="pdfZoom" [page]="page"
[show-all]="true" [autoresize]="true" style="display: block;">
</pdf-viewer>
</div>
</div>
<!--<img src="assets/common/images/sampleProfilePics/a.jpg" height="432" width="405" />-->
I created a layout. On that I'm using ng2-pdfviewer package to add pdf documents on layout page,and with that created zoomin and zoom out button,and overflow-x and overflow-y scrollbars.but overflow-y scrollbar only working but overflow-x is not working why because horizontal scroll bar is coming with pdf itself.
So,I want to remove that predifined horizontal scroll bar.
Related
I created a simple calculator app. I have two component: Calculator and Result and use Angular router between them. Now I want to do this : When I perform a calculation in Calculation component, the result will be passed and displayed in another Result component. Can you show me some ways for this ?
calculator.component.ts
#Component({
selector: 'app-calculator',
templateUrl: './calculator.component.html',
styleUrls: ['./calculator.component.css']
})
export class CalculatorComponent implements OnInit {
public number1: number;
public number2: number;
public result: number;
constructor() {
}
sum() {
this.result = this.number1 + this.number2;
}
diff() {
this.result = this.number1 - this.number2;
}
mult() {
this.result = this.number1 * this.number2;
}
divi() {
this.result = this.number1 / this.number2;
}
ngOnInit(): void {
}
}
calculator.component.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="card">
<div class="card-header">CALCULATOR</div>
<div class="card-body">
<div class="form-group value">
<div class="form-group row">
<label class="col-md-2 col-form-label">Value 1:</label>
<div class="col-md-10 input-1">
<input [(ngModel)]='number1' class="form-control inp" type="number" name="num1">
</div>
</div>
<div class="form-group row">
<label class="col-md-2 col-form-label">Value 2:</label>
<div class="col-md-10 input-2">
<input [(ngModel)]='number2' class="form-control inp" type="number" name="num2">
</div>
</div>
</div>
<div class="buttons">
<br>
<button class="butt" (click)='sum()'> + </button>
<button class="butt" (click)='diff()'> - </button>
<button class="butt" (click)='mult()'> x </button>
<button class="butt" (click)='divi()'> / </button>
<br><br><br>
</div>
{{result}}
</div>
</div>
</body>
</html>
app-routing.module.ts
import { NgModule } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
import { CalculatorComponent } from './calculator/calculator.component';
import { ResultComponent } from './result/result.component';
const appRoutes: Routes = [
{ path: 'calculator', component: CalculatorComponent },
{ path: 'result', component: ResultComponent }
];
#NgModule({
imports: [RouterModule.forRoot(appRoutes,
{ enableTracing: true } // <-- debugging purposes only
)],
exports: [RouterModule]
})
export class AppRoutingModule { }
app.component.html
<h1>Angular Router</h1>
<nav>
<a routerLink="/calculator" routerLinkActive="active">Calculator</a><br>
<a routerLink="/result" routerLinkActive="active">Result</a>
</nav>
<router-outlet></router-outlet>
data.service.ts
import { Injectable } from '#angular/core';
#Injectable({
providedIn: 'root'
})
export class DataService {
constructor() { }
}
There are multiple ways to do this,
The simplest way can be to use state while navigating to result route from calculator route.
this.router.navigate(['result'], { state: { result } });
This will put your result in window.history.state object, which then you can access from result component.
ngOnInit() {
this.resultValue = window.history.state.result;
}
Demo
2. You can also store the result in shared service and then access that variable from result component. Inject the service wherever required and store the retrieve data from it.
#Injectable()
export class SharedServiceService {
storeValue: number = 0;
constructor() { }
}
I have a hamburger inside of my header - as soon as it is clicked, I wan't to disable scroll - since the hamburger is moving on scroll.
I tried to set the hamburger to position: fixed. But this one changed the position of its neighbour, which looked weird.
Is there a way to realize this in typescript - so that as soon clicked is true, scrolling is disabled. Or is there a better approach?
https://stackblitz.com/edit/angular-beiajz
export class HeaderComponent implements OnInit {
clicked = false;
onClick(): void {
this.clicked = !this.clicked;
}
constructor() { }
ngOnInit(): void {
}
}
<div class="container-fluid mobile position-absolute">
<div class="row m-0 w-100">
<div class="col-6 offset-3 justify-content-center d-flex">
<a class="align-self-center" routerLink="">
<h1>NØREBRO STUDIOS</h1>
</a>
</div>
<div class="col-3">
<button class="hamburger hamburger--collapse" (click)="onClick()" [class.is-active]="clicked" type="button">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</button>
</div>
<div class="container-fluid position-fixed min-vh-100 px-0 slide-in" [class.get-active]="clicked">
</div>
</div>
</div>
One of the way is passing a event from the child to parent whenever click is made on the hamburger menu and changing the parent class CSS
in app.component.html
<app-test (hamburgerClick)="hamburgerClickEvent($event)"></app-test>
<div [ngClass]="{
'container-fluid-overlay': overlayFlag === true,
'container-fluid': overlayFlag === false }">
</div>
in app.component.ts
import { Component } from '#angular/core';
#Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
name = 'Angular';
overlayFlag = false; // overlay flag..onload overlay is hidden
public hamburgerClickEvent(e:boolean):void{
this.overlayFlag= e;
}
}
in app.component.css
.container-fluid {
min-height: 200vh;
}
.container-fluid-overlay {
height: auto;
}
in test.component.ts
import { Component, OnInit , Output, EventEmitter} from '#angular/core';
#Component({
selector: 'app-test',
templateUrl: './test.component.html',
styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {
#Output() hamburgerClick = new EventEmitter();//emitter
clicked = false;
onClick(): void {
this.clicked = !this.clicked;
this.hamburgerClick.emit(this.clicked); //emitting clicked event to parent
}
constructor() { }
ngOnInit(): void {
}
}
Hope it helps :)
I'm trying to communicate between two components, but my #Output() doesn't seem to be working when a button is clicked. Accessing the function is not the issue as I can get a response from the console.
child-comp.component.html:
<div class="container" style="text-align: center" style="padding-top: 10px">
<label>The Child text is: {{goodbye}} </label>
<p></p>
<p>The parent input is : {{state}} </p>
<button class="primary" (click)='sendToParent()'>Send to Parent</button>
</div>
parent-comp.component.html:
<div class="container" style="text-align: center" style="padding-top:
10px">
<label>The Parent text is: {{hello}}</label>
<p></p>
<p>The Child input is : {{goodbye}} </p>
</div>
<hr>
<app-child-comp [state]="hello" (event)="setDataFromChild()"></app-child-
comp>
child-comp.component.html:
<div class="container" style="text-align: center" style="padding-top:
10px">
<label>The Child text is: {{goodbye}} </label>
<p></p>
<p>The parent input is : {{state}} </p>
<button class="primary" (click)='sendToParent()'>Send to Parent</button>
</div>
child-comp.component.ts:
import { Component, OnInit, Input, Output, EventEmitter} from
'#angular/core';
#Component({
selector: 'app-child-comp',
templateUrl: './child-comp.component.html',
styleUrls: ['./child-comp.component.css'],
})
export class ChildCompComponent implements OnInit {
#Input() public state: string;
#Output() event: EventEmitter<string> = new EventEmitter();
public goodbye = 'goodbye';
constructor() { }
ngOnInit() {
}
sendToParent() {
this.event.emit(this.goodbye);
}
}
parent-comp.component.ts:
import { Component, OnInit } from '#angular/core';
#Component({
selector: 'app-parent-comp',
templateUrl: './parent-comp.component.html',
styleUrls: ['./parent-comp.component.css']
})
export class ParentCompComponent implements OnInit {
public hello = 'hello';
public goodbye: string;
constructor() { }
ngOnInit() {
}
public setDataFromChild(data) {
this.goodbye = data;
console.log('event emitted');
}
}
You dont take data comming from EventEmitter:
Change this:
(event)="setDataFromChild()"
To:
(event)="setDataFromChild($event)"
I'm using Angular 5, and I wanted to press another button to get another button.
I do not know if I would have to use the ngIf, but I do not know how to identify the previous button.
example.ts
import { Component, OnInit } from '#angular/core';
import { Hero } from '../hero';
import { HeroService } from '../hero.service';
#Component({
selector: 'app-heroes',
templateUrl: './heroes.component.html',
styleUrls: ['./heroes.component.css']
})
export class HeroesComponent implements OnInit {
heroes: Hero[];
constructor(private heroService: HeroService) { }
ngOnInit() {
this.getHeroes();
}
getHeroes(): void {
this.heroService.getHeroes()
.subscribe(heroes => this.heroes = heroes);
}
add(name: string): void {
name = name.trim();
if (!name) { return; }
this.heroService.addHero({ name } as Hero)
.subscribe(hero => {
this.heroes.push(hero);
});
}
delete(hero: Hero): void {
this.heroes = this.heroes.filter(h => h !== hero);
this.heroService.deleteHero(hero).subscribe();
}
}
example.html
<ul class="heroes">
<li *ngFor="let hero of heroes">
<a routerLink="/detail/{{hero.id}}">
<span class="badge">{{hero.id}}</span> {{hero.name}}
</a>
<button class="delete" title="delete hero" (click)="delete(hero)">x</button>
</li>
</ul>
In your component.ts:
#Component({
selector: 'app-heroes',
templateUrl: './heroes.component.html',
styleUrls: ['./heroes.component.css']
})
export class HeroesComponent implements OnInit {
heroes: Hero[];
showSecondButton: boolean = false;
constructor(private heroService: HeroService) { }
ngOnInit() {
this.getHeroes();
}
delete(hero: Hero): void {
this.heroes = this.heroes.filter(h => h !== hero);
this.heroService.deleteHero(hero).subscribe();
this.showSecondButton = true;
}
}
In your html:
<ul class="heroes">
<li *ngFor="let hero of heroes">
<a routerLink="/detail/{{hero.id}}">
<span class="badge">{{hero.id}}</span> {{hero.name}}
</a>
<button class="delete" title="delete hero" (click)="delete(hero)">x</button>
<button *ngIf="showSecondButton"> Your second button</button>
</li>
</ul>
so your best bet is to create two buttons within a div, then have a toggle that switches the button that is displayed.
Example:
<div>
<button *ngIf=!displaysecondbutton (click)='showsecondbutton()'>First Button Yo</button>
<button *ngIf=displaysecondbutton>SecondButtonYo</button>
</div>
typescript file;
displaysecondbutton = false;
showsecondbutton(){
this.displaysecondbutton = true;
}
To keep the code concise I would implement an if statement in your delete function:
public deleteConfirmed = false;
public confirmDelete = false;
delete(hero: Hero): void {
if (deleteConfirmed) {
confirmDelete = deleteConfirmed = false;
this.heroes = this.heroes.filter(h => h !== hero);
this.heroService.deleteHero(hero).subscribe();
}
else{
confirmDelete = true;
}
}
Then in your html:
<button class="delete" title="delete hero" (click)="delete(hero)">Delete</button>
<button *ngIf="confirmDelete" class="delete" title="delete hero" (click)="deleteConfirmed=true; delete(hero)">Confirm Deletion</button>
This way, you are always cycling the same function and just altering some states along the way.
I have 3 components in angular 2 application.The class="container-fluid content" is css class in app.component.html. This class="container-fluid content" is default css for other components. Now I want to set background-color:blue in the detail component. I tried to set in detail.component.ts like this styles:['.container-fluid content{background-color: blue;}'] It did not work. If I set in app.component.html like this <div class="container-fluid content" style="background-color: blue;"> It applies to both the components. How to override this class="container-fluid content" in detail component?
//my project structure
app
- app.component.html
-app.component.ts
- welcome
-welcome.component.html
-welcome.component.ts
- detail
-detail.component.html
-detail.component.ts
//app.component.html
<div class="container-fluid content">
<router-outlet></router-outlet>
</div>
<app-footer></app-footer>
</div>
//welcome.component.html
<h1>welcome page heading</h1>
<div fxLayout="row" fxLayoutWrap style="padding-bottom: 25px;
padding-top: 25px; margin: auto;justify-content: center" >
<md-card>
<md-card-content>
<h1></h1>
<h2></h2>
<h2>
</h2>
</md-card-content>
</md-card>
</div>
//detail.component.html
<h1>Details page heading</h1>
<div fxLayout="row" fxLayoutWrap style="padding-bottom: 25px;
padding-top: 25px; margin: auto;justify-content: center" >
<md-card>
<md-card-content>
<h1></h1>
<h2></h2>
<h2>
</h2>
</md-card-content>
</md-card>
</div>
//detail.component.ts
import { OnInit, Component } from '#angular/core';
import { DetailService } from '../detail/detail.service';
import { HostBinding} from '#angular/core';
#Component({
providers: [DetailService ]
templateUrl: './detail.component.html',
styles: ['h3 {margin:5px}']
})
export class DetailComponent implements OnInit {
#HostBinding('class.blueClass') blue: boolean = false;
constructor( private _detailService: DetailService ) { }
ngOnInit() {
this.blue = true;
}
}
In child component, you can add this param to #Component.
// child-component.component.ts
#Component({
selector: 'child-component',
templateUrl: 'child-component.component.html',
styleUrls: ['child-component.component.css']
encapsulation: ViewEncapsulation.None
})
// child-component.component.css
.container-fluid content{background-color: blue;}
You can ref this side for more infomartion :
https://blog.thoughtram.io/angular/2015/06/29/shadow-dom-strategies-in-angular2.html
Have you tried with the hostbinding and adding a new class there?
#HostBinding('class.blueClass') blue: boolean = false;
And in the second component just switch that on onInit?
ngOnInit() {
this.blue = true;
}
The other way could be in the component definition, you can add the following line :
host: {'class': 'blueClass'}
and you do the rest of the css work in css instead.