how to change style by using javascript on angular

Question

I'm building an ionic app using angular.

I have a page with HTML and SCSS files. I'm using some ng-bootstrap components on this page (datePicker).

I can change the style of class inside the datePicker by using this code.

::ng-deep .ngb-dp-months {
  background: red;
}

All fine to this point.

now I want to change the width of this class .ngb-dp-day on ngOnInit()

I tried this code but it's not working, try to fix it for me here:

See: https://stackblitz.com/edit/angular-ciow7q-n7rums

  //I need to fix this funtions
  changeDayElementWidth() {
      this.widthPerDay = (window.innerWidth) / 7;

      this.daysElements = document.getElementsByClassName("ngb-dp-day") as HTMLCollectionOf<HTMLElement>;

      console.log(this.daysElements);

      for (var i in this.daysElements) {
        this.daysElements[i].style.width = this.widthPerDay + 'px';
      }

    }

The Question is:

how to change the CSS of the element ::ng-deep .ngb-dp-day ?

See: https://stackblitz.com/edit/angular-ciow7q-n7rums

Please Help me.

abdulrahman alaa · Accepted Answer · 2020-03-24 19:08:12Z

2

I Agree with @guerric You should never call JavaScript API in Angular. In order to change the styling in angular, you may use

[ngStyle]

<div [ngStyle]="{'width': widthChangingPropertyInTypeScript + 'px' }"></<div>

[ngClass]

  <li [ngClass]="{
    'text-success':person.country === 'UK',
    'text-primary':person.country === 'USA',
    'text-danger':person.country === 'HK'
  }">{{ person.name }} ({{ person.country }})
  </li>

[style.width] This may be a function in your component.ts file that will calculate the width for you and return a string.

<div [style.width]="getWidth(this)"></div>

answered Mar 24, 2020 at 19:08

abdulrahman alaa

5574 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mansour Alnasser Over a year ago

how to do that on a component of those ng-bootstrap.github.io/#/components/datepicker/overview

abdulrahman alaa Over a year ago

I believe you can tweak this by css inheritance as in here Demo stackblitz.com/edit/angular-ciow7q

Guerric P · Accepted Answer · 2020-03-24 19:15:06Z

0

You should never call JavaScript API in Angular, try [style.width.px]="widthPerDay" in the template instead.

Edit:

Now you clarified, the only solution (but very hacky) is to do this:

const style = document.createElement('style');
style.innerHTML = `.ngb-dp-months { width: ${widthPerDay}px; }`;
document.body.appendChild(style);

edited Mar 24, 2020 at 19:15

answered Mar 24, 2020 at 18:57

Guerric P

32k6 gold badges61 silver badges109 bronze badges

3 Comments

Mansour Alnasser Over a year ago

I'm changing the width of ng-bootstrap component (not mine) so I cannot edit the template, (maybe)

Guerric P Over a year ago

so you're talking about changing CSS code with Angular?

Mansour Alnasser Over a year ago

this code is exactly what I want, but it needs some fixes See: stackblitz.com/edit/angular-ciow7q-n7rums

Mansour Alnasser · Accepted Answer · 2020-03-25 07:03:37Z

I have solved it by using a custom template for the day element

datepicker-basic.html

<p>Simple datepicker</p>
<div>
  <ngb-datepicker 
  #dp 
  [(ngModel)]="model"
  [dayTemplate]="customdaytemplate" 
  (navigate)="date = $event.next"></ngb-datepicker>
</div>


<ng-template #customdaytemplate let-date let-focused="focused">
    <span
      [ngStyle]="{ width: widthPerDay+'px' }"
      class="custom-day"
    >
      {{ date.day }}
    </span>
</ng-template>

datepicker-basic.ts

import {Component, OnInit} from '@angular/core';
import {NgbDateStruct, NgbCalendar} from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'ngbd-datepicker-basic',
  templateUrl: './datepicker-basic.html',
  styleUrls: ['./datepicker-basic.scss'],
})
export class NgbdDatepickerBasic implements OnInit {

  model: NgbDateStruct;
  date: {year: number, month: number};
  widthPerDay;
  daysElements;

  constructor(private calendar: NgbCalendar) {
  }

  ngOnInit() {
    this.changeDayElementWidth();
  }

  changeDayElementWidth() {
      this.widthPerDay = (window.innerWidth) / 7;
  }

}

datepicker-basic.scss

/* custom-day */
.custom-day {
  display: inline-block;
  text-align: center;
  height: auto;
  width: 2em;
  padding: 0.2rem 0;
}

:host ::ng-deep .ngb-dp-day,
:host ::ng-deep .ngb-dp-week-number,
:host ::ng-deep .ngb-dp-weekday {
  width: auto;
  height: auto;
  text-align: center;
}

SEE: https://stackblitz.com/edit/angular-ciow7q-n7rums

Collectives™ on Stack Overflow

how to change style by using javascript on angular

3 Answers 3

2 Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related