CODEWITHSUNDEEP
ionic4stenciljs
user3718908x100
user3718908x100

Reputation: 8509

Ionic 4 Stencil PWA - Manipulating DOM elements

I am trying out ionic 4 for the first time and I am trying to change the css style of an element on my page.

eg.

I have a div

<div id="foo"></div>

Now on mouseover I would like to move the div to a different position on my page.

How do I get the element #foo and change the position on mouseover in my component?

please note this is just an example of what I want to do and i have no interest in using CSS for this since it would not working for me.

I have done some reading on ionic 4 and the shadow dom but it still makes no sense to me.

Upvotes: 0

Views: 477

Answers (1)

Varun Sukheja
Varun Sukheja

Reputation: 6516

Since you do not want to write any css and want to refer element in your controller, can use viewChild as shown below

In HTML

<div #foo></div>

In Controller

import { Component, ViewChild, ElementRef } from '@angular/core';
.
.
.

@ViewChild('foo') divRef: ElementRef;

constructor() {
}

ngAfterViewInit() {
  this.divRef.nativeElement.style.background = "red";
}

Here is running code in stackblitz

Upvotes: 1

Related Questions