Categories

Thursday, August 18, 2022
therichposts@gmail.com
Angular7Javascript

How to set and get div attribute value on button click in Angular 7?

Hello to all, welcome to therichpost.com. In this post, I will tell you, How to set and get div attribute value on button click in Angular 7?

If you are new in Angular 7, then you can check my old post to familiar with Angular 7.

I am getting and setting div attribute value with simple Javascript getAttribute and setAttribute method and this seems very easy.


How to set and get div attribute value on button click in Angular 7?

Here I am going show you working code snippet please follow be carefully:


1. Here is the code, you can add into your component html file like I added into app.component.html file:

For looking good, I just added bootstrap CDN, but you can remove this or you want to add bootstrap into you Angular 7 application, then please follow this post Add Bootstrap to Angular 7.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="jumbotron text-center" data-id="2">
  <h1>Attribute value is :</h1>
  <h3>{{ attrval }}</h3> 
</div>
how to set and get div attribute value on button click in Angular 7
http://prntscr.com/m8a4bj
<div class="container">
  <div class="btn-group">
    <button (click)="getVal()" type="button" class="btn btn-primary">Get Div Attribute Value</button>
    <button (click)="setVal()" type="button" class="btn btn-primary">Set Div Attribute Value</button>
  </div>
</div>

2. Here is the code, you need to add your component.ts file like I added into app.component.ts file:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'angulartricks';
  attrval : any;
  
  getVal(){
  	var x = document.getElementsByClassName("jumbotron")[0].getAttribute("data-id");
  	alert(x);
  }

  setVal(){
  	document.getElementsByClassName("jumbotron")[0].setAttribute("data-id", "3");
  	this.attrval = document.getElementsByClassName("jumbotron")[0].getAttribute("data-id");
  }

  ngOnInit()
  {
  	this.attrval = document.getElementsByClassName("jumbotron")[0].getAttribute("data-id");
  }
}

 

If you have any query related to this post then you can comment below or you can ask question.

Harjas,

Thank you

therichpost
the authortherichpost
Hello to all. Welcome to therichpost.com. Myself Ajay Malhotra and I am freelance full stack developer. I love coding. I know WordPress, Core php, Angularjs, Angular 7, Angular 8, Angular 9, Angular 10, Angular 11, Angular12, Angular 13, Angular 14, Bootstrap 5, Nodejs, Laravel, Codeigniter, Shopify, Squarespace, jQuery, Google Map Api, Vuejs, Reactjs, Big commerce etc.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.