CODEWITHSUNDEEP
cssangularfont-size
Pumayk26
Pumayk26

Reputation: 565

increase decrease the font size of whole app in angular 6

I want to change the font size of whole app in one click. like in this article

Right now am trying to archive this by document.getElementsByTagName() and get element current font size and increase it. Unfortunately I cannot get the current font size. When I call document.getElementsByTagName('body').[index].style.fontSize, returns an empty string. Is there are any packages available to do this..? any suggestions?

Upvotes: 4

Views: 6184

Answers (2)

Yash
Yash

Reputation: 3576

getElementsByTagName() will retrieve an array of all element objects with the specified tag name.

Now you have only one body tag and using this function to retrieve it is an overkill and not of much use. It's better to wrap your app with a tag having id like <div id="myAppView">....app....</div>

Then selecting the id and applying the modification.

I've created a Stackblitz: https://stackblitz.com/edit/angular-k2szyy which has a slight modification of your code using .getElementById()

TS:

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';

change() {
  document.getElementById('myAppView').style.fontSize = '50%';
}

}

HTML:

<div id="myAppView">
<hello name="{{ name }}"></hello>
<p>
  Start editing to see some magic happen :)
</p>
<button
(click) = "change()"
>Update</button>
</div>

Upvotes: 0

KLTR
KLTR

Reputation: 1334

you can use [ngClass] on your wrapper div. I have created a stack blitz for it

the idea is to change the class when you click on a button and define your classes with font sizes

Upvotes: 2

Related Questions