how to change style by using javascript on angular

user_1448379 0
Viewed 3521

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.

ng-bootstrap ionic-framework angular javascript
3 Answers

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>
user_92640500

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);
user_37381710

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

user_14483790
Related