medium-zoom implementation is not working in Angular 13 - javascript

I am trying to implement medium-zoom from https://www.npmjs.com/package/medium-zoom
These are the steps I followed
ng new medium_zoom_test (Angular 13) with routing & css
npm install medium-zoom
image is kept in assets
app.component.html
<h1>Zoom test</h1>
<img class="zoomy" width="50%" src="assets/image.svg">
app.component.ts
import { Component } from '#angular/core';
import mediumZoom from 'medium-zoom';
mediumZoom('.zoomy', {
margin: 40,
background: '#ffffff',
scrollOffset: 40
})
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'medium_zoom_test';
}
On serving the application the webpage with image is visible. However, there's no zoom icon on hover and the image won't zoom on click. It's just a normal webpage with no change.
Any alternatives to implement the zooming of images are welcome too.

I don't think mediumZoom will work when the passed selector has no corresponding element in the DOM. What I mean is where you call mediumZoom function the component is not attached to the DOM yet. If you want to guarantee that you need to call it on ngOnInit lifecycle hook. Or you can do better which is to define a directive that applies the zoom affect like this :
import mediumZoom from 'medium-zoom';
#Directive({
selector: '[appZoomie]'
})
export class ZoomieDirective {
constructor(private el: ElementRef) {
mediumZoom(el.nativeElement, {
margin: 40,
background: '#ffffff',
scrollOffset: 40
})
}
}
And use it like this :
<img appZoomie src=".."/>
Stackblitz

Related

Get HTML content with styles in Angular

I have an application created using Angular. I need to get html of template of some big component but with styles that used there for classes. How can I do that in angular? Currently I'm trying to achieve this with getting innerHTML:
const myTemplate = document.getElementById("someWrapperId");
const content = myContent.innerHTML;
It doesn't return styled html.
I also tried with setting encapsulation: ViewEncapsulation.None - it also doesn't help in my case.
Styles are set in component.css file and not inline.
Hi I think you can use #ViewChild and ElementRef to get the HTML content style. I have a sample code below =>
HTML:
<div #infoDiv class='col-md-2' style='color: blue;width:152px'>INFO DIV</div>
<br>
Your Color:: {{styleColor}}
<br>
Your Width:: {{styleWidth}}
TS:
import { Component, ElementRef, ViewChild } from '#angular/core';
#Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
styleColor:any='';
styleWidth:any='';
#ViewChild('infoDiv') infoDivRef: ElementRef;
ngAfterViewInit(): void {
if (this.infoDivRef.nativeElement) {
console.log(this.infoDivRef.nativeElement.style.color);
this.styleColor=this.infoDivRef.nativeElement.style.color;
this.styleWidth=this.infoDivRef.nativeElement.style.width;
}
}
}
NOTE: Code is also available in stackblitz. Please check the LINK DEMO link.

use ng2-charts with a loader and AfterViewInit

I have a web page which has some charts, right now I'm trying to create a loader which is very simple:
<div *ngIf="loading === true; else elseBlock" class="container">
<div class="grid-pulse la-3x">
</div>
</div>
<ng-template #elseBlock>
<ng-content></ng-content>
</ng-template>
import { Component, Input, ChangeDetectionStrategy } from '#angular/core';
#Component({
selector: 'app-loader',
templateUrl: './loader.component.html',
styleUrls: ['./loader.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class LoaderComponent {
#Input() loading = true;
}
which only swap between a component and a loader while the flag is true and the component when it is false.
now I implemented some of the charts like this:
<app-loader [loading]="loading">
<canvas
baseChart
#canvas
[labels]="chartLabels"
[datasets]="chartData"
[options]="chartOptions"
[chartType]="chartType">
</canvas>
</app-loader>
import { Component, Input, ChangeDetectionStrategy } from '#angular/core';
#Component({
selector: 'my-component',
// ... the other stuff, scss, html
})
export class MyComponent implements OnInit {
loading = true;
// more
// data
// ....
ngOnInit(){
this.httpService.get('/something').subscribe(data => {
//do something with the data
this.loading = false; //set loader to false.
});
}
}
which work perfectly, my loading variable depends on a http request that I do, and then I change the variable to false and therefore my chart appears.
the problem is that when I change my variable to false, it starts to mount the component, but I already stopped showing the loader.... therefore I see a blank space while the chart is appearing.
so the question is:
how can I check if the chart was already mounted and created? because I don't want to show that white space (I'll show a fake loader on top while the component starts rendering, any Ideas on how to accomplish?)
I read that someway to accomplish this is with AfterViewInit but can I access that information with a component that is not created by me (in this case )
The only logical reason i can think of - You are changing the loading variable to true, before the data is actually processed and passed into the array, if you are using a forEach loop consider using await or a simple for loop.

How does Angular Component CSS encapsulation work?

I want to understand that if I create two style sheets
Style 1
.heading {
color: green;
}
Style 2
.heading {
color: blue;
}
Now if these two styles are written in two different views, when rendering them
on a layout as a Partial View, then in this case a conflict could occur
and one could override the style of the other.
BUT
Using angular(see page 16), how come these two styles in different components render on the same page with encapsulation? How come the CSS is not overriden?
For example
import { Component } from '#angular/core';
#Component({
selector: 'app-user-item',
template: '<p class="heading">abc</p>',
styleUrls: ['./user-item.css']
})
export class UserItemComponent implements OnInit {
constructor() {}
ngOnInit() {}
}
user-item.css
.heading{ color :green}
app-user.component.ts
import { Component } from '#angular/core';
#Component({
selector: 'app-user',
template: '<p class="heading">abc</p>',
styleUrls: ['./user.css']
})
export class UserItemComponent implements OnInit {
constructor() {}
ngOnInit() {}
}
user.css
.heading{ color :blue}
When rendering this on a page:
<app-user></app-user>
<app-user-item></app-user-item>
This is the result:
Angular (by default) emulates a shadow DOM.
It dynamically creates some HTML attributes that are only applicable to elements in that component.
For example:
<app-user></app-user>
<app-user-item></app-user-item>
will be transformed to
<app-user _ngcontent-1></app-user>
<app-user-item _ngcontent-2></app-user-item>
And your css will be transformed to:
.heading[_ngcontent-1] { color: blue }
.heading[_ngcontent-2] { color: green }
You can find a more complete explanation here and the documentation here
Angular comes with CSS encapsulation out of the box. When generating a new project, the default is for the styles.css file at the root of the project to apply globally to the application, and for component styles, such as the styles found in foo.component.css,to only apply to the foo component and nowhere else. But that is not the only way styles can be encapsulated in Angular, let us take a closer look.#Component({
selector: 'app-foo',
templateUrl: './foo.component.html',
styleUrls: ['./foo.component.css']
})

Integrate xterm.js to Angular

I'm new to Angular.
I'm trying to use xterm.js (https://xtermjs.org/) but it display badly.
Here is the render :
Render
I created a xterm component. The xterm.component.ts file code is :
import { Component, OnInit } from '#angular/core';
import { Terminal } from "xterm";
#Component({
selector: 'app-xterm',
templateUrl: './xterm.component.html',
styleUrls: ['./xterm.component.css'],
})
export class XtermComponent implements OnInit {
public term: Terminal;
container: HTMLElement;
constructor() { }
ngOnInit() {
this.term = new Terminal();
this.container = document.getElementById('terminal');
this.term.open(this.container);
this.term.writeln('Welcome to xterm.js');
}
}
My xterm.component.html only contains this :
<div id="terminal"></div>
I don't really know what to do more ...
Thanks in advance guys
You must set the component encapsulation
#Component({
encapsulation: ViewEncapsulation.None,
...
})
Encountered the same problem and found this page.
Maybe this is too late for the OP, but could be useful for others.
The styles are wrong because 1) the xterm.css is not loaded, and 2) the encapsulation.
My solution to 1) was to add #import 'xterm/dist/xterm.css'; in the scss file for this component.
And 2) can be solved by setting encapsulation: ViewEncapsulation.None as Victor96's answer, or better setting encapsulation: ViewEncapsulation.ShadowDom.
Hope this helps.
I know this is old, but I had to put terminal initialation in ngAfterViewInit. Otherwise the DOM elements are undefined.
Try to use in template reference variable by using the hash symbol
<div #myTerminal></div>
and in component
#ViewChild('myTerminal') terminalDiv: ElementRef;
In ngOnInit
ngOnInit() {
this.term = new Terminal();
this.term.open(this.terminalDiv.nativeElement);
this.term.writeln('Welcome to xterm.js');
}

Javascript Angular 4 using eventEmitter though several layers of components

I am having a bit of a problem with getting the following situation done in Angular.
I am using Angular 4 and this is the situation.
app.component.html contains a wrapper div which I would like to be able to change it's color by adding a class to it.
My problem is that I have different layers of components.
For example, if I wanted to change the class in app.component.html it would have this:
app.component - root
button-wrapper.component - holds the button
button.component - message comes from there.
Normally I could do this:
import { Component } from '#angular/core';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = 'app';
myClass = '';
handleEvent(value) {
console.log(value);
myClass = value;
}
}
and in app.component.html have this:
<div [ngClass]="myClass">
<app-button (outputEvent)="handleEvent($event)"></app-button>
</div>
BUT, my problem is that app-button component is inside button-wrapper component so it looks like this:
<div [ngClass]="myClass">
<button-wrapper></div>
</div>
So where would I put this:
(outputEvent)="handleEvent($event)"
How can I go round this issue?
You can chain events as long as their direct children:
button.component.ts (selector: app-button)
startChainEvent() {
this.outputEvent.emit('className');
}
button-wrapper.component.html
<app-button (outputEvent)="handleEvent($event)"></app-button>
button-wrapper.component.ts (selector: app-button-wrapper)
handleEvent(e) {
this.outputEvent.emit(e);
}
app.component.html
<app-button-wrapper (outputEvent)="handleEvent($event)"></app-button-wrapper>
app.component.ts
handleEvent(e) {
myClass = e;
}

Categories