Can't get DOM tree that loads iframe via src. Doesn't work through ViewChild and getElementById. Tell me how to get the DOM tree of everything that is inside the iframe?
<div class="card-iframe">
<iframe #iframe class="iframe" id="iframes" src=""></iframe>
</div>
#Component({
selector: 'kiosk-doctor-purposes-page',
templateUrl: './doctor-purposes-page.component.html',
styleUrls: ['./doctor-purposes-page.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class DoctorPurposesPageComponent implements OnInit, AfterViewInit {
#ViewChild('iframe', { static: true }) public iframe: ElementRef<HTMLIFrameElement>;
constructor() {}
ngAfterViewInit(): void {
console.log(window.parent.document.getElementById('iframes'));
const iframe: any = window.parent.document.getElementById('iframes');
// iframe.contentWindow.document.getElementsByTagName('div').innerText = 'asfdsdf3rsdf';
}
#ViewChild('iframe', { static: true }) public iframe: ElementRef<HTMLIFrameElement>;
and
const iframe: any = window.parent.document.getElementById('iframes');
don't work.
Related
Hi i am new to angular
this is my angular component
#Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
user = ""
constructor() { }
ngOnInit(): void {
}
}
Is there a way that I can execute a block of code whenever this user variable changes?
yes you can set condition on user or if the user is change from html then you can call that method on (change)="methodName()"
So I try to communicate between components with ngAfterViewInit.
And I want to use the property
participant: ParticipantInfoDTO;
also using in other component. So I try it like this
#Component({
selector: 'app-detail',
templateUrl: './detail.component.html',
styleUrls: ['./detail.component.scss'],
template: 'Example: {{participant}}<app-echeq-selector></app-echeq-selector>'
})
export class DetailComponent implements OnInit, AfterViewInit {
#ViewChild(EcheqSelectorComponent) echeqReference: ParticipantInfoDTO;
participant: ParticipantInfoDTO;
constructor(private dialog: MatDialog, route: ActivatedRoute) {
this.participant = route.snapshot.data['participant'];
}
ngOnInit() {
}
ngAfterViewInit(): void {
this.participant = this.echeqReference;
}
}
And in child component(EcheqSelectorComponent) I want it using like this:
<p> selected id:{{participant}} </p>
But I get an error on this line:
#Component({
selector: 'app-detail',
templateUrl: './detail.component.html',
styleUrls: ['./detail.component.scss'],
template: 'Example: {{participant}}<app-echeq-selector></app-echeq-selector>'
})
saying:
Component 'DetailComponent' must not have both template and
templateUrlng(0)
Thank you
Remove template property in your component decorator.
In detail.component.html, add all the elements you want so that your html file looks like this:
Example: {{participant}}<app-echeq-selector></app-echeq-selector>
If you want to pass a property to app-echeq-selector component then you can use property binding like this:
<app-echeq-selector [participant]="participant"></app-echeq-selector>
In echeq component.ts:
export class echeq... {
#Input() participant;
// you can use this participant property as you want now.
}
suppose i want to insert some HTML element from the server side to the component, how can i do it
import { Component, ElementRef, ViewChild, AfterViewChecked, TemplateRef, ViewContainerRef } from '#angular/core';
#Component({
selector: 'app-root',
template: `
<div>
<h3>this is the container</h3>
<div #holder></div>
</div>
`
})
export class AppComponent implements AfterViewChecked {
#ViewChild('holder', { read: TemplateRef }) _template: TemplateRef<any>;
constructor() { }
ngAfterViewChecked() {
debugger;
this._template.createEmbeddedView('<div>this is a new "div" element</div>');
}
}
in this code i am trying to insert a div to another div with the id='holder' but i am not able to achieve it.
I got the simple way to achieve.
html
<div [innerHTML]="yourHtml"></div>
ts
public yourHtml = '<div>this is a new "div" element</div>';
I'm using a service to dynamically change the content in my header depending on the page I'm on, however when I put HTML in my component it doesn't render in the browser (see example below)
home.component.ts
import { Component, OnInit } from '#angular/core';
import { HeaderTitleService } from '../../services/headerTitle.service';
#Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {
constructor(
private headerTitleService: HeaderTitleService
) { }
ngOnInit() {
this.headerTitleService.setTitle(`
We strive to create things
<br> that are engaging, progressive
<br> & above all
<span class="highlight">
<em>innovative.</em>
</span>
`);
}
}
header.component.ts
import { Component, OnInit } from '#angular/core';
import { HeaderTitleService } from '../../../services/headerTitle.service'
#Component({
selector: 'app-header',
templateUrl: './header.component.html',
styleUrls: ['./header.component.scss']
})
export class HeaderComponent implements OnInit {
title: any;
constructor(
private headerTitleService: HeaderTitleService
) { }
ngOnInit() {
this.headerTitleService.title.subscribe(updatedTitle => {
this.title = updatedTitle;
});
}
}
header.component.html
<h1>{{title}}</h1>
so Im trying to set the title to be a string that has html tags in it that I want to be rendered but what happens is the whole thing comes out as a string instead of how it would look like it I had put it in my home.component.html.
Is there a way I can do this??
You can set the [innerHtml] property
<h1 [innerHtml]="title"></h1>
Example
I'm new in angular2. my code is like this:
import { Component, OnInit } from '#angular/core';
#Component({
selector: 'main',
template: `
<div class="current">
</div>
`
})
export class MainComponent implements OnInit {
ngOnInit(): void {
//change the div class from current to next...
}
}
i'd like to change the div class from 'current' to 'next'.
i appropriate if you let me know what is the best way do that?
One option is to use a template reference variable.
In the example below, the reference variable #target is added to the desired element and then the decorator #ViewChild (#ViewChild('target') target) allows you to access the variable in your component.
From there, you can get a reference to the DOM element by accessing the nativeElement property on the variable.
Here is an example where the class name is updated:
import { Component, AfterViewInit, ViewChild } from '#angular/core';
#Component({
selector: 'main',
template: `
<div #target class="current">
</div>
`
})
export class MainComponent implements AfterViewInit {
#ViewChild('target') target;
constructor() { }
ngAfterViewInit(): void {
let element = this.target.nativeElement;
element.className = 'next';
}
}
However, it's worth pointing out that you can handle most DOM manipulation with the build-in DOM directives. In this case you could just use the ngClass directive to bind a variable with the class attribute:
import { Component, AfterViewInit } from '#angular/core';
#Component({
selector: 'main',
template: `
<div [ngClass]="targetClass">
</div>
`
})
export class MainComponent implements AfterViewInit {
private targetClass: string = 'current';
constructor() { }
ngAfterViewInit(): void {
this.targetClass = 'next';
}
}