CODEWITHSUNDEEP
htmlcssangularangular5angular6
sathish kumar
sathish kumar

Reputation: 936

How to change border radius based on click event in angular 6

I have 2 different html file,

test1.html test2.html test2.component.ts

1) test1.html : 

   <div style="width:100%;height:20%"></div>

2) test2.html :

If I click rectangle function, test1.html border radius should change as 0px.

If I click roundCorder function, test1.html border radius should change as 10px;

<img (click)="rectangle()" [src]="imgSrc" (mouseover)="rectangleHover()" (mouseout)="rectangleOut()" style="height:100px;float:left;margin:15px;" >
       <img (click)="roundCorner()" [src]="imgSrc1" (mouseover)="roundHover()" (mouseout)="roundOut()" style="height:100px;float:left;margin:15px;">

3) test2.components.ts :

  roundCorner(){
     // want to change test1.html file div border radius as 10px;
  }

Upvotes: 1

Views: 3168

Answers (3)

Aravind
Aravind

Reputation: 41571

You can simply pass the HTML and add the styles to it as below,

HTML

<div #divElement style="width:100%;height:20%"></div>
<button (click)="rectangle(divElement)">Rectangle</button>
<button (click)="circle(divElement)">Circle</button>

Typescript

rectangle(divElement) {
    divElement.style.borderRadius = '0px'
    console.log(divElement.style)
  }
  circle(divElement) {
    divElement.style.borderRadius = '50%'
    console.log(divElement.style)
  }

Stakblitz

Upvotes: 1

Vaibhav
Vaibhav

Reputation: 1499

test1.html

<div #elem1 style="width:100%;height:20%"></div>

test2.html 

 <img #elem2 (click)="rectangle()" [src]="imgSrc" (mouseover)="rectangleHover()" (mouseout)="rectangleOut()" style="height:100px;float:left;margin:15px;" >
           <img (click)="roundCorner()" [src]="imgSrc1" (mouseover)="roundHover()" (mouseout)="roundOut()" style="height:100px;float:left;margin:15px;">

test2.component.ts

import {ElementRef,Renderer2} from '@angular/core';
@ViewChild('elem2') el:ElementRef;

constructor(private rd: Renderer2,sharedService:SharedService) {
   this.el=this.sharedService.get();
}



 roundCorner(){
     // want to change test1.html file div border radius as 10px;
    this.el.style.border-radius='10px';

  }
rectangle(){
this.el.style.border-radius='0px';
}

shared.service.ts

@Injectable()
class SharedService{
let elem1:any
set(element:any)
{
  this.elem1=element;
}
get(){
return this.elem1;
}

test1.component.ts

@ViewChild('elem1'):ElementRef
constructor(sharedService:SharedService,elementRef:ElementRef){
}
ngOnInit()
{
    this.sharedService(this.elem1);
}

What you have to use is a shared service to access this dom element reference variable between both the components and then set the property of border-radius respectively

import {SharedService} in both the component.ts files and app.module.ts and put SharedService under providers array in app.module.ts

Upvotes: 0

Suresh Kumar Ariya
Suresh Kumar Ariya

Reputation: 9764

Is test1 is your parent component and test2 is your child component. If thats the case, you can emit an event using EventEmitter() with value rectangle/square from Child component. You can read that event in parent component and update the DOM using ngStyle.

Upvotes: 0

Related Questions