Je construis une application ionique en utilisant angulaire.
J'ai une page avec des fichiers HTML et SCSS. J'utilise des composants NG-Bootstrap sur cette page (DatePicker). P>
Je peux changer le style de la classe à l'intérieur de la datePicker en utilisant ce code. P>
//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';
}
}
3 Réponses :
Vous ne devez jamais appeler API JavaScript en angulaire, essayez EDIT: Vous avez maintenant clarifié, la seule solution (mais très hacky) est de le faire: [style.width.px] = "largeurday" dans le modèle à la place.
Je change la largeur de la composante NG-BOOTSTRAP (NON MINE), donc je ne peux donc pas éditer le modèle (peut-être)
Donc, vous parlez de changer de code CSS avec angulaire?
Ce code est exactement ce que je veux, mais il a besoin de corrections voir: Stackblitz.com/edit/angular -Ciow7Q-N7Rums
Je suis d'accord avec @guerric, vous ne devez jamais appeler l'API JavaScript en angulaire. Afin de changer le style en angulaire, vous pouvez utiliser
[style.width] peut être une fonction dans votre composant.TS Fichier qui calculera la largeur pour vous et renvoie une chaîne.
Comment faire cela sur un composant de ces Ng-bootstrap.github.io/# / Composants / DatePicker / Vue d'ensemble
Je crois que vous pouvez modifier cela par le héritage CSS comme dans la démo Stackblitz.com/edit/angular-ciow7q
Je l'ai résolu à l'aide d'un modèle personnalisé pour l'élément de jour
/* 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;
}