कोणीय 2 में गतिशील रूप से css अपडेट करना

108

मान लीजिए कि मेरे पास एक Angular2 घटक है

//home.component.ts

import { Component } from 'angular2/core';

@Component({
    selector: "home",
    templateUrl: "app/components/templates/home.component.html",
    styleUrls: ["app/components/styles/home.component.css"]
})
export class HomeComponent {
    public width: Number;
    public height: Number;
}

इस घटक के लिए टेम्पलेट HTML फ़ाइल

//home.component.html

<div class="home-component">Some stuff in this div</div>

और अंत में इस घटक के लिए सीएसएस फ़ाइल

//home.component.css

.home-component{
    background-color: red;
    width: 50px;
    height: 50px;
}

जैसा कि आप देख सकते हैं कि कक्षा में 2 गुण हैं, widthऔर height। मैं चौड़ाई और ऊंचाई के मूल्यों के साथ मेल खाने के लिए चौड़ाई और ऊंचाई के लिए सीएसएस शैलियों को पसंद करूंगा और जब गुण अपडेट करेंगे, तो div अद्यतन की चौड़ाई और ऊंचाई। इसे पूरा करने का उचित तरीका क्या है?

css angular

— tt9
स्रोत

264

इसे इस्तेमाल करे

 <div class="home-component" 
 [style.width.px]="width" 
 [style.height.px]="height">Some stuff in this div</div>

[अपडेट किया गया]:% उपयोग में सेट करने के लिए

[style.height.%]="height">Some stuff in this div</div>

— गौरव मुखर्जी
स्रोत

50

@ गौरव के उत्तर के साथ px या em के बजाय% का उपयोग करना, यह सिर्फ है

<div class="home-component" [style.width.%]="80" [style.height.%]="95">
Some stuff in this div</div>

— हेलेन
स्रोत

18

यह करना चाहिए:

<div class="home-component" 
     [style.width]="width + 'px'" 
     [style.height]="height + 'px'">Some stuff in this div</div>

— Sasxa
स्रोत

11

आप होस्टबाइंडिंग का भी उपयोग कर सकते हैं:

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

export class HomeComponent {
    @HostBinding('style.width') width: Number;
    @HostBinding('style.height') height: Number;
}

अब जब आप HomeComponent के भीतर से चौड़ाई या ऊंचाई की संपत्ति बदलते हैं, तो यह शैली की विशेषताओं को प्रभावित करना चाहिए।

— 11MB
स्रोत

7

स्वीकृत उत्तर गलत नहीं है।

समूहीकृत शैलियों के लिए, एक व्यक्ति नेसटाइल निर्देश का भी उपयोग कर सकता है।

<some-element [ngStyle]="{'font-style': styleExpression, 'font-weight': 12}">...</some-element>

आधिकारिक डॉक्स यहां हैं

— जोयूआ ट्री
स्रोत

6

कार्यशील डेमो यहां देखें

import {Component,bind} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';
import {FORM_DIRECTIVES} from 'angular2/form';

import {Directive, ElementRef, Renderer, Input,ViewChild,AfterViewInit} from 'angular2/core';

@Component({
  selector: 'my-app',
    template: `
    <style>
       .myStyle{
        width:200px;
        height:100px;
        border:1px solid;
        margin-top:20px;
        background:gray;
        text-align:center;
       }
    </style>

          <div [class.myStyle]="my" [style.background-color]="randomColor" [style.width]="width+'px'" [style.height]="height+'px'"> my width={{width}} & height={{height}}</div>
    `,
    directives: []
})

export class AppComponent {
  my:boolean=true;
  width:number=200px;
  height:number=100px;
  randomColor;
  randomNumber;
  intervalId;
  textArray = [
    'blue',
    'green',
    'yellow',
    'orange',
    'pink'
  ];


  constructor() 
  {
    this.start();
  }

      start()
      { 
        this.randomNumber = Math.floor(Math.random()*this.textArray.length);
        this.randomColor=this.textArray[this.randomNumber];
        console.log('start' + this.randomNumber);
        this.intervalId = setInterval(()=>{
         this.width=this.width+20;
         this.height=this.height+10;
         console.log(this.width +" "+ this.height)
         if(this.width==300)
         {
           this.stop();
         }

        }, 1000);
      }
      stop()
      {
        console.log('stop');
        clearInterval(this.intervalId);
        this.width=200;
        this.height=100;
        this.start();

      }
 }

bootstrap(AppComponent, []);

— micronyks
स्रोत

6

यदि आप उपयोग की बजाय चर के साथ गतिशील रूप से चौड़ाई सेट करना चाहते हैं तो {{}} के बजाय ब्रेसिज़:

 <div [style.width.px]="[widthVal]"  [style.height.px]="[heightVal]"></div>

 <div [style.width.%]="[widthVal]"  [style.height.%]="[heightVal]"></div>

— गोविंद समरो
स्रोत

5

आप डायनामिक वैल्यू इनलाइन [style. उपलब्धता] और [style.hiegh] div की संपत्ति को जोड़कर div की शैली (चौड़ाई और ऊंचाई) को बदल सकते हैं।

आपके मामले में आप इस तरह की div की इनलाइन शैली की चौड़ाई और ऊंचाई की संपत्ति के साथ HomeComponent वर्ग की चौड़ाई और ऊंचाई की संपत्ति को बांध सकते हैं ... जैसा कि Sasxa द्वारा निर्देशित है

<div class="home-component" 
     [style.width]="width + 'px'" 
     [style.height]="height + 'px'">Some stuff in this div
</div>

कार्यशील डेमो के लिए इस प्लंकर पर एक नज़र डालें ( http://plnkr.co/edit/cUbbo2?p=preview )

   //our root app component
import {Component} from 'angular2/core';
import {FORM_DIRECTIVES,FormBuilder,AbstractControl,ControlGroup,} from "angular2/common";

@Component({
  selector: 'home',
  providers: [],
  template: `
     <div class="home-component" [style.width]="width+'px'" [style.height]="height+'px'">Some this div</div>
     <br/>
     <form [ngFormModel]="testForm">
        width:<input type="number" [ngFormControl]="txtWidth"/> <br>
        Height:<input type="number"[ngFormControl]="txtHeight" />
     </form>
  `,
  styles:[`

      .home-component{
        background-color: red;
        width: 50px;
        height: 50px;
    }

  `],
  directives: [FORM_DIRECTIVES]
})
export class App {
  testForm:ControlGroup;
  public width: Number;
  public height: Number;
  public txtWidth:AbstractControl;
  public txtHeight:AbstractControl;

  constructor(private _fb:FormBuilder) {
      this.testForm=_fb.group({
        'txtWidth':['50'],
        'txtHeight':['50']
      });

      this.txtWidth=this.testForm.controls['txtWidth'];
      this.txtHeight=this.testForm.controls['txtHeight'];

      this.txtWidth.valueChanges.subscribe(val=>this.width=val);
      this.txtHeight.valueChanges.subscribe(val=>this.height =val);
  }
}

— Jorin
स्रोत

5

मुझे ऊपर वेनहावूआई के विचार का लुक पसंद आया , लेकिन मुझे डायनामिक रूप से ऊंचाई निर्धारित करने के लिए प्राइमएनजी ट्री घटक में कक्षा के साथ div की पहचान करने की आवश्यकता थी । सभी उत्तर मैं के उपयोग को सक्षम करने के div नामित किए जाने की आवश्यकता मिल सकता है (यानी #treediv) , , , आदि यह एक तीसरी पार्टी घटक के साथ गंदा था।.ui-tree@ViewChild()@ViewChildren()@ContentChild()@ContentChilden()

अंत में मुझे गुंटर ज़ोचबॉयर का एक स्निपेट मिला :

ngAfterViewInit() {
  this.elRef.nativeElement.querySelector('.myClass');
}

इससे यह आसान हो गया:

@Input() height: number;
treeheight: number = 400; //default value

constructor(private renderer: Renderer2, private elRef: ElementRef) {  }

ngOnInit() {
    this.loading = true;
    if (this.height != null) {
        this.treeheight = this.height;
    }   
}

ngAfterViewInit() {
    this.renderer.setStyle(this.elRef.nativeElement.querySelector('.ui-tree'), 'height', this.treeheight + "px");
}

— davaus
स्रोत

4

उपरोक्त सभी उत्तर महान हैं। लेकिन अगर आप एक समाधान खोजने की कोशिश कर रहे थे जो नीचे HTML फ़ाइलों को नहीं बदलेगा तो यह मददगार है

 ngAfterViewChecked(){
    this.renderer.setElementStyle(targetItem.nativeElement, 'height', textHeight+"px");
}

आप से रेंडरर आयात कर सकते हैं import {Renderer} from '@angular/core';

— WenhaoWu
स्रोत

1

चूंकि यह उत्तर पोस्ट किया गया था, रेंडरर को पदावनत कर दिया गया था। इसके बजाय Renderer2 का उपयोग करें, और setElementStyle () को setStyle () द्वारा प्रतिस्थापित करें

— क्रिस

2

आप एक फ़ंक्शन को कॉल करके भी इसे प्राप्त कर सकते हैं

<div [style.width.px]="getCustomeWidth()"></div>

  getCustomeWidth() {
    //do what ever you want here
    return customeWidth;
  }

— खोलीदार
स्रोत

0

Html में:

<div [style.maxHeight]="maxHeightForScrollContainer + 'px'">
</div>

त्स में

this.maxHeightForScrollContainer = 200 //your custom maxheight

— भरत चौधरी
स्रोत