গতিময়ভাবে কৌনিক 2 এ সিএসএস আপডেট করা হচ্ছে

Question

ধরা যাক আমার কাছে একটি কৌণিক 2 উপাদান রয়েছে

//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;
} 

এই উপাদানটির জন্য টেমপ্লেট এইচটিএমএল ফাইল

//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। আমি প্রস্থ এবং উচ্চতার জন্য সিএসএস শৈলীগুলি প্রস্থ এবং উচ্চতার বৈশিষ্ট্যের মানগুলির সাথে মেলে এবং যখন বৈশিষ্ট্যগুলি আপডেট হয়, ডিভ আপডেটের প্রস্থ এবং উচ্চতা। এটি সম্পাদন করার উপযুক্ত উপায় কী?

Answer 1

এটা চেষ্টা কর

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

Answer 2

@ গৌরবের উত্তরের সাথে px বা em এর পরিবর্তে% ব্যবহার করতে, এটি ঠিক

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

Answer 3

এটি করা উচিত:

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

Answer 4

আপনি হোস্টবাইন্ডিং ব্যবহার করতে পারেন:

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

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

এখন আপনি যখন হোম কম্পোনেন্টের মধ্যে থেকে প্রস্থ বা উচ্চতার বৈশিষ্ট্যটি পরিবর্তন করেন, এটি স্টাইলের বৈশিষ্ট্যগুলিকে প্রভাবিত করে।

Answer 5

গৃহীত উত্তরটি ভুল নয়।

গোষ্ঠীযুক্ত শৈলীর জন্য কেউ এনজিস্টাইল নির্দেশিকাও ব্যবহার করতে পারে।

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

সরকারী দস্তাবেজগুলি এখানে

Answer 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, []);

Answer 7

যদি আপনি পরিবর্তে পরিবর্তে width {} ces ধনুর্বন্ধনী ব্যবহারের পরিবর্তে পরিবর্তনশীল সঙ্গে প্রস্থ সেট করতে চান:

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

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

Answer 8

আপনি গতিশীলভাবে ডাইনামিক মান সংযুক্ত করে ডিভের শৈলীর (প্রস্থ এবং উচ্চতা) পরিবর্তন করতে পারেন ডাইনামিক মানকে [ইনলাইন.উইথথ] এবং [স্টাইল.ইইচ] ডিভের সম্পত্তিতে।

আপনার ক্ষেত্রে আপনি ডিভের ইনলাইন স্টাইলের প্রস্থ এবং উচ্চতার বৈশিষ্ট্যগুলির সাথে হোমকোম্পোনেন্ট শ্রেণির প্রস্থ এবং উচ্চতার বৈশিষ্ট্যটিকে বেঁধে রাখতে পারেন ... সাসেক্সা নির্দেশিত হিসাবে

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

Answer 9

আমি চেহারা পছন্দ করেছে WenhaoWuI উপরে এর ধারণা, কিন্তু আমি সঙ্গে DIV আছে চিহ্নিত করা প্রয়োজন বর্গ .ui-tree মধ্যে PrimeNG গাছ উপাদান পরিবর্তনশীল উচ্চতা সেট করতে। সকল উত্তর আমি এর ব্যবহার নিশ্চিত করার DIV আছে নামে করা প্রয়োজন খুঁজে পাওয়া যায়নি (অর্থাত #treediv) @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");
}

Answer 10

উপরের সমস্ত উত্তর দুর্দান্ত। তবে আপনি যদি এমন কোনও সমাধান খোঁজার চেষ্টা করছেন যা নীচের এইচটিএমএল ফাইলগুলিকে পরিবর্তন করবে না তবে এটি সহায়ক

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

আপনি এ থেকে রেন্ডারার আমদানি করতে পারেন import {Renderer} from '@angular/core';

Comments

যেহেতু এই উত্তর পোস্ট করা হয়েছিল, রেন্ডারারকে অবহেলা করা হয়েছিল। পরিবর্তে রেন্ডারার 2 ব্যবহার করুন এবং সেটস্টাইল () দ্বারা সেটলেমেন্টস্টাইল () প্রতিস্থাপন করুন

— ক্রিস

Answer 11

আপনি একটি ফাংশন কল করেও এটি অর্জন করতে পারেন

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

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

Answer 12

এইচটিএমএলে:

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

এস এস তে

this.maxHeightForScrollContainer = 200 //your custom maxheight