আমি কীভাবে শর্তাধীন AngularJS এ সিএসএস শৈলীগুলি প্রয়োগ করতে পারি?


309

চতুর্থাংশ 1। মনে করুন যে আমি প্রতিটি "আইটেম" এর চেহারাটি পরিবর্তন করতে চাই যা একটি ব্যবহারকারী মুখ্য "মুছুন" বোতাম টিপানোর আগে মুছে ফেলার জন্য চিহ্নিত করে। (এই তাত্ক্ষণিক ভিজ্যুয়াল প্রতিক্রিয়াটি "আপনি কি নিশ্চিত?" ডায়ালগ বক্সের প্রবাদটির প্রয়োজনীয়তা অপসারণ করবেন।) কোন আইটেমগুলি মুছে ফেলা উচিত তা বোঝাতে ব্যবহারকারী চেকবক্সগুলি পরীক্ষা করবে। যদি একটি চেকবক্সটি চেক করা না থাকে, সেই আইটেমটি তার স্বাভাবিক চেহারায় ফিরে যেতে হবে।

সিএসএস স্টাইলিং প্রয়োগ বা সরানোর সর্বোত্তম উপায় কী?

Q2 এর। ধরুন আমি প্রতিটি ব্যবহারকারীকে কীভাবে আমার সাইট উপস্থাপন করা হবে তা ব্যক্তিগতকৃত করার অনুমতি দিতে চাই। উদাহরণস্বরূপ, ফন্টের মাপের একটি নির্দিষ্ট সেট থেকে নির্বাচন করুন, ব্যবহারকারী-সংজ্ঞাযোগ্য অগ্রভাগ এবং পটভূমির রঙ ইত্যাদির অনুমতি দিন etc.

ব্যবহারকারী সিএসএস স্টাইলিং প্রয়োগ / ইনপুট নির্বাচন করার সর্বোত্তম উপায় কী?


দরকারী নিবন্ধ tech-blog.maddyzone.com/javascript/...
Rituraj রতন

উত্তর:


485

কৌণিক শর্তাধীন / গতিশীলভাবে সিএসএস স্টাইলিং পরিচালনা করার জন্য বেশ কয়েকটি অন্তর্নির্মিত নির্দেশনা সরবরাহ করে:

  • এনজি-ক্লাস - সিএসএস শৈলীর সেটটি স্থির / সময়ের আগে জানা থাকলে ব্যবহার করুন
  • এনজি-স্টাইল - আপনি যখন কোনও সিএসএস শ্রেণি সংজ্ঞায়িত করতে না পারেন তখন ব্যবহার করুন কারণ শৈলীর মানগুলি পরিবর্তনশীল হতে পারে। শৈলীর মানগুলির প্রোগ্রামযোগ্য নিয়ন্ত্রণ বিবেচনা করুন।
  • এনজি-শো এবং এনজি-লুকান - আপনার যদি কেবল কোনও কিছু দেখানোর বা লুকানোর প্রয়োজন হয় (সিএসএস সংশোধন করে) ব্যবহার করুন
  • এনজি-ইফ - সংস্করণ ১.১.৫ -এ নতুন, আরও ভার্বোস এনজি-স্যুইচের পরিবর্তে ব্যবহার করুন যদি আপনার কেবলমাত্র একটি একক শর্ত পরীক্ষা করতে হয় (ডিওএম সংশোধন করে)
  • এনজি-সুইচ - একাধিক পারস্পরিক একচেটিয়া এনজি-শো ব্যবহারের পরিবর্তে ব্যবহার করুন (ডিওএম সংশোধন করে)
  • এনজি-অক্ষম এবং এনজি-পঠনযোগ্য - ফর্ম উপাদান আচরণ সীমাবদ্ধ করতে ব্যবহার করুন
  • এনজি-অ্যানিমেট - সংস্করণ 1.1.4 এ নতুন, CSS3 রূপান্তর / অ্যানিমেশন যুক্ত করতে ব্যবহার করুন

সাধারণ "কৌণিক উপায়" এর মধ্যে একটি ইউআই উপাদান হিসাবে একটি মডেল / স্কোপ সম্পত্তি যুক্ত করে যা ব্যবহারকারীর ইনপুট / ম্যানিপুলেশন গ্রহণ করবে (যেমন, এনজি-মডেল ব্যবহার করবে), এবং তারপরে উল্লিখিত বিল্ট-ইন দিকনির্দেশগুলির একটিতে সেই মডেল সম্পত্তি যুক্ত করে।

যখন ব্যবহারকারী ইউআই পরিবর্তন করে, কৌনিকটি পৃষ্ঠায় সম্পর্কিত উপাদানগুলিকে স্বয়ংক্রিয়ভাবে আপডেট করবে।


কিউ 1 এনজি-ক্লাসের জন্য ভাল কেসের মতো শোনাচ্ছে - সিএসএস স্টাইলিংটি কোনও শ্রেণিতে ধরা যেতে পারে।

এনজি-ক্লাস একটি "এক্সপ্রেশন" গ্রহণ করে যা অবশ্যই নিম্নলিখিতগুলির মধ্যে একটির কাছে মূল্যায়ন করতে হবে:

  1. স্পেস-সীমাবদ্ধ শ্রেণীর নামের একটি স্ট্রিং
  2. শ্রেণি নামের একটি অ্যারে
  3. বুলিয়ান মানগুলিতে শ্রেণীর নামের মানচিত্র / অবজেক্ট

ধরে নিচ্ছি আপনার আইটেমগুলি কিছু অ্যারে মডেলের উপরে এনজি-রিপিট ব্যবহার করে প্রদর্শিত হবে এবং যখন কোনও আইটেমের চেকবক্সটি চেক করা হয় আপনি pending-deleteক্লাসটি প্রয়োগ করতে চান :

<div ng-repeat="item in items" ng-class="{'pending-delete': item.checked}">
   ... HTML to display the item ...
   <input type="checkbox" ng-model="item.checked">
</div>

উপরে, আমরা এনজি-ক্লাসের এক্সপ্রেশন টাইপ # 3 ব্যবহার করেছি - বুলিয়ান মানগুলিতে শ্রেণীর নামের মানচিত্র / অবজেক্ট।


কিউ 2 এনজি-স্টাইলের জন্য ভাল কেসের মতো মনে হচ্ছে - সিএসএস স্টাইলিং গতিশীল, তাই আমরা এর জন্য কোনও শ্রেণি সংজ্ঞায়িত করতে পারি না।

এনজি-স্টাইল এমন একটি "এক্সপ্রেশন" গ্রহণ করে যা অবশ্যই মূল্যায়ন করতে হবে:

  1. সিএসএস মানগুলিতে সিএসএস শৈলীর নামের একটি মানচিত্র / অবজেক্ট

একটি সঙ্কল্পিত উদাহরণের জন্য, ধরুন যে ব্যবহারকারী ব্যাকগ্রাউন্ড রঙের জন্য একটি টেক্সবক্সে একটি রঙের নাম টাইপ করতে পারেন (একটি jQuery রঙ চয়নকারীটি খুব সুন্দর হবে):

<div class="main-body" ng-style="{color: myColor}">
   ...
   <input type="text" ng-model="myColor" placeholder="enter a color name">


উপরের উভয়ের জন্য ফিডল

এই পোড়ায় এনজি-শো এবং এনজি-লুকানোর উদাহরণও রয়েছে । যদি একটি চেকবাক্স চেক করা থাকে, ব্যাকগ্রাউন্ড-রঙের গোলাপী রঙের পরিবর্তে কিছু পাঠ্য দেখানো হয়। পাঠ্য বাক্সে যদি 'লাল' প্রবেশ করানো হয় তবে একটি ডিভ লুকিয়ে যায়।


এই উত্তর ভয়ঙ্কর! ক্লিক ইভেন্ট যদি ক্লিক করা এলিমেন্টটি নয় এমন একটি অঞ্চলে একটি ক্লাস যুক্ত করে / পরিবর্তন করছিল তবে পার্থক্য কী হতে পারে তা আপনি jsfiddle এর মাধ্যমে আমাকে দেখাতে রাজি হন? পৃষ্ঠায় অন্য কোথাও একটি ডিভ বলুন।
tehaaron

এটা দরকারী নিবন্ধ tech-blog.maddyzone.com/javascript/...
Rituraj রতন

দুর্দান্ত অ্যাঞ্জার বিটিডব্লিউ, আপনি কি কখনও এনজি-স্টাইলে কৌনিক ফিল্টার প্রয়োগ করার চেষ্টা করেছেন?
এভি গান

আমি কিউ 2 সম্পর্কিত একটি অতিরিক্ত বিকল্প যুক্ত করার পরামর্শ দিচ্ছি যা আমি এই প্রশ্নের আমার সাম্প্রতিক উত্তরে সবেমাত্র যুক্ত করেছি।
গ্যাভিন পামার

105

টেবিলের উপাদানগুলির মধ্যে ক্লাস প্রয়োগ করার সময় আমি সমস্যার মুখোমুখি হয়েছি যখন আমার একটি ক্লাস ইতিমধ্যে পুরো টেবিলটিতে প্রয়োগ হয়েছিল (উদাহরণস্বরূপ, বিজোড় সারিগুলিতে একটি রঙ প্রয়োগ করা হয়েছে <myClass tbody tr:nth-child(even) td>)। দেখে মনে হচ্ছে আপনি যখন বিকাশকারী সরঞ্জামগুলির সাহায্যে উপাদানটি পরীক্ষা করেন , তখন element.styleকোনও স্টাইল বরাদ্দ করা হয় না। সুতরাং ব্যবহারের পরিবর্তে ng-class, আমি ব্যবহার করার চেষ্টা করেছি ng-styleএবং এই ক্ষেত্রে, নতুন সিএসএস অ্যাট্রিবিউটটি ভিতরে উপস্থিত হবে element.style। এই কোডটি আমার পক্ষে দুর্দান্ত কাজ করে:

<tr ng-repeat="element in collection">

    [...amazing code...]

    <td ng-style="myvar === 0 && {'background-color': 'red'} ||
                  myvar === 1 && {'background-color': 'green'} ||
                  myvar === 2 && {'background-color': 'yellow'}">{{ myvar }}</td>

    [...more amazing code...]

</tr>

মাইভার যা আমি মূল্যায়ন করছি এবং প্রতিটি ক্ষেত্রে আমি মাইভার মানের <td>উপর নির্ভর করে প্রত্যেকের কাছে একটি স্টাইল প্রয়োগ করি , যা পুরো টেবিলের জন্য সিএসএস শ্রেণিতে প্রয়োগ করা বর্তমান শৈলীর ওভাররাইট করে।

হালনাগাদ

আপনি যদি টেবিলটিতে উদাহরণস্বরূপ কোনও শ্রেণি প্রয়োগ করতে চান তবে কোনও পৃষ্ঠা দেখার সময় বা অন্য ক্ষেত্রে আপনি এই কাঠামোটি ব্যবহার করতে পারেন:

<li ng-class="{ active: isActive('/route_a') || isActive('/route_b')}">

মূলত, আমাদের এনজি-ক্লাসটি সক্রিয় করার জন্য যা প্রয়োগ করা হবে তা হল ক্লাস এবং সত্য বা মিথ্যা বিবৃতি। সত্য শ্রেণী প্রয়োগ করে এবং মিথ্যা দেয় না। সুতরাং এখানে আমাদের পৃষ্ঠাটির রুটের দুটি চেক এবং তাদের মধ্যে একটি ওআর রয়েছে, সুতরাং আমরা যদি /route_a OR এ থাকি route_bতবে সক্রিয় শ্রেণি প্রয়োগ করা হবে।

এটি ডানদিকে কেবল একটি যুক্তিযুক্ত ফাংশন নিয়ে কাজ করে যা সত্য বা মিথ্যা প্রত্যাবর্তন করে।

সুতরাং প্রথম উদাহরণে, এনজি-স্টাইলটি তিনটি বিবৃতি দ্বারা শর্তযুক্ত। যদি সেগুলি সমস্ত মিথ্যা হয় তবে কোনও শৈলী প্রয়োগ করা হয়নি, তবে আমাদের যুক্তি অনুসরণ করে কমপক্ষে একটি প্রয়োগ করা হচ্ছে, সুতরাং, যুক্তি প্রকাশটি পরীক্ষা করবে যে কোন পরিবর্তনশীল তুলনা সত্য এবং কারণ একটি খালি অ্যারে সর্বদা সত্য, এটি হবে রিটার্ন হিসাবে একটি অ্যারে রেখেছিল এবং কেবলমাত্র একটি সত্য দিয়ে, আমরা পুরো প্রতিক্রিয়ার জন্য OR ব্যবহার করছি তা বিবেচনা করে , বাকি শৈলীটি প্রয়োগ করা হবে।

যাইহোক, আমি আপনাকে ফাংশনটি দিতে ভুলে গেছি হ'ল এ্যাকটিভ ():

$rootScope.isActive = function(viewLocation) {
    return viewLocation === $location.path();
};

নতুন আপডেট

এখানে আপনার কাছে এমন কিছু রয়েছে যা আমি সত্যিই দরকারী বলে মনে করি। যখন আপনার কোনও ভেরিয়েবলের মানের উপর নির্ভর করে কোনও ক্লাস প্রয়োগ করার প্রয়োজন হয়, উদাহরণস্বরূপ, এর বিষয়বস্তুর উপর নির্ভর করে একটি আইকন div, আপনি নিম্নলিখিত কোডটি ব্যবহার করতে পারেন (এতে খুব দরকারী ng-repeat):

<i class="fa" ng-class="{ 'fa-github'   : type === 0,
                          'fa-linkedin' : type === 1,
                          'fa-skype'    : type === 2,
                          'fa-google'   : type === 3 }"></i>

হরফ থেকে ফন্ট আইকন


কী অদ্ভুত বাক্য গঠন এবং এর অর্থ অন্যটি হওয়া উচিত, যেমন অন্য কোনও সি অনুপ্রাণিত ভাষায়
পিজ্জাইওলা গর্জনজোলা

3
@ পিজ্জাইওলা গর্জনজোলা && এর অর্থ AND এবং || মানে না। এটি একটি কেস / সুইচ স্টেটমেন্ট হিসাবে প্রায় শর্ট সার্কিট যুক্তি ব্যবহার করে একটি চালাক হ্যাক ...
স্টেইন জি স্ট্রিনডাগ

ধন্যবাদ মিট আমি এই বিস্তারিত বুঝতে পারিনি।
টিমবার্গাস

নতুন আপডেট বিভাগটি কবজির মতো কাজ করেছে! এটির জন্য +1!
মাটিয়াস

নিউ আপডেটে উল্লিখিত এনজি-ক্লাসের উদাহরণটি আমার জন্য বেশ ভাল কাজ করেছে। বেশ সুন্দর
অ্যাসুইন

34

এনজি-ক্লাস ব্যবহার করা যায় না যখন এটি ভাল কাজ করে (উদাহরণস্বরূপ যখন এসভিজি স্টাইল করার সময়):

ng-attr-class="{{someBoolean && 'class-when-true' || 'class-when-false' }}"

(আমি মনে করি এনজি-অ্যাটর- ব্যবহার করার জন্য আপনার সর্বশেষতম অস্থির কৌণিক হওয়া উচিত, আমি বর্তমানে ১.১.৪ এ আছি)

আমি AngularJS + SVG এর সাথে কাজ করার বিষয়ে একটি নিবন্ধ প্রকাশ করেছি। এটি এই ইস্যু এবং অন্যান্য অনেকের কথা বলে। http://www.codeproject.com/Articles/709340/Implementing-a-Flowchart-with-SVG-and-AngularJS


আমি ১.১.৪ ডক্সে এনজি-অ্যাটরের কোনও উল্লেখ দেখতে পাচ্ছি না - আপনার কোনও লিঙ্ক আছে?
মার্ক রাজকক

দুঃখিত একটি লিঙ্ক নেই। আমি কৌণিক ফোরামগুলি অনুসরণ করে এটি সম্পর্কে জানতে পেরেছি, যদিও আমি সঠিক পৃষ্ঠাটি মনে করতে পারি না।
অ্যাশলে ডেভিস

1
সর্বশেষতম দস্তাবেজ (v1.2) নির্দেশিকা পৃষ্ঠাতে বিভাগ এনজিএটার অ্যাট্রিবিউট বাইন্ডিংগুলি বর্ণনা ng-attr-করে ।
রাজকোক

১.২ সহ এটি একটি দুর্দান্ত উত্তর হয়ে যায়। ng-classআপনাকে যুক্তি সম্পাদন করতে দেয় না, তবে ng-attr-classকরে। এগুলির উভয়েরই ব্যবহার রয়েছে তবে আমি বাজি রাখতে পারি অনেকগুলি বিকাশকারী সন্ধান করবে ng-attr-class
হিলিয়ানপফবল

এখানে সরবরাহিত অন্যান্য সমাধান ব্যর্থ হলে আমি এটি ভালভাবে কাজ করতে পেলাম। ধন্যবাদ.
ডিপিএস

13
span class="circle circle-{{selectcss(document.Extension)}}">

এবং কোড

$scope.selectcss = function (data) {
    if (data == '.pdf')
        return 'circle circle-pdf';
    else
        return 'circle circle-small';
};

CSS

.circle-pdf {
    width: 24px;
    height: 24px;
    font-size: 16px;
    font-weight: 700;
    padding-top: 3px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    background-image: url(images/pdf_icon32.png);
}

সর্বদা
আইএফ

আমি ক্লাস-অ্যাট্রিবিউটটি সরাসরি ব্যবহার এড়াতে উত্সাহিত করতে চাই। এটি এই উপাদানটিতে অন্যান্য প্লাগইন দ্বারা করা পরিবর্তনগুলি ওভাররাইট করে।
সাইমনসিমিটিসি

10

এই সমাধানটি আমার পক্ষে কৌশলটি করেছে

<a ng-style="{true: {paddingLeft: '25px'}, false: {}}[deleteTriggered]">...</a>

8

আপনি টের্নারি এক্সপ্রেশন ব্যবহার করতে পারেন। এই কাজটি করার দুটি পদ্ধতি আছে:

<div ng-style="myVariable > 100 ? {'color': 'red'} : {'color': 'blue'}"></div>

বা ...

<div ng-style="{'color': (myVariable > 100) ? 'red' : 'blue' }"></div>

1
সম্ভবত আপনি এটি আরও ভাল পাবেন: <div ng-style = "color 'color': (myVariable> 100)? 'Red': 'blue'}"> </div>
ডুডি

ডুডি, আরও ভাল না হলে ঠিক যেমন দরকারী, তাই আমি এটিকে @ মেইকের "ত্রিনিয়ী অভিব্যক্তি" উত্তরে যুক্ত করেছি। আপনাদের দুজনকেই ধন্যবাদ!
jbobbins

7

যখন আপনার এক বা দুটি বৈশিষ্ট্যের একটি সাধারণ সিএসএস শৈলীর প্রয়োজন হবে তখন অন্য একটি বিকল্প:

দেখুন:

<tr ng-repeat="element in collection">
    [...amazing code...] 
    <td ng-style="{'background-color': getTrColor(element.myvar)}">
        {{ element.myvar }}
    </td>
    [...more amazing code...]
</tr>

নিয়ন্ত্রক:

$scope.getTrColor = function (colorIndex) {
    switch(colorIndex){
        case 0: return 'red';
        case 1: return 'green';
        default: return 'yellow';
    }
};

6

নিম্নলিখিত উদাহরণ দেখুন

<!DOCTYPE html>
    <html ng-app>
    <head>
    <title>Demo Changing CSS Classes Conditionally with Angular</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
    <script src="res/js/controllers.js"></script>

    <style>

    .checkboxList {
        border:1px solid #000;
        background-color:#fff;
        color:#000;
        width:300px;
        height: 100px;
        overflow-y: scroll;
    }

    .uncheckedClass {
       background-color:#eeeeee;
       color:black;
    }
    .checkedClass {
        background-color:#3ab44a;
        color:white;
    }
    </style>

    </head>
    <body ng-controller="TeamListCtrl">
    <b>Teams</b>
    <div id="teamCheckboxList" class="checkboxList">

    <div class="uncheckedClass" ng-repeat="team in teams" ng-class="{'checkedClass': team.isChecked, 'uncheckedClass': !team.isChecked}">

    <label>
    <input type="checkbox" ng-model="team.isChecked" />
    <span>{{team.name}}</span>
    </label>
    </div>
    </div>
    </body>
    </html>

2

AngularJS v1.2.0rc হিসাবে, ng-classএবং এমনকি ng-attr-classএসভিজি উপাদানগুলির সাথে ব্যর্থ হয় (তারা আগে কাজ করেছিল, এমনকি শ্রেণীর বৈশিষ্ট্যের অভ্যন্তরে সাধারণ বাঁধাইয়ের সাথে)

বিশেষতঃ এগুলির কোনওটিই এখন কাজ করে না:

ng-class="current==this_element?'active':' ' "
ng-attr-class="{{current==this_element?'active':' '}}"
class="class1 class2 .... {{current==this_element?'active':''}}"

কাজের মত, আমি ব্যবহার করতে হবে

ng-attr-otherAttr="{{current==this_element?'active':''}}"

এবং তারপরে স্টাইল ব্যবহার করুন

[otherAttr='active'] {
   ... styles ...
}

1

শর্তসাপেক্ষে শৈলী প্রয়োগের আরও একটি উপায় (ভবিষ্যতে) শর্তাধীন স্কোপড স্টাইল তৈরি করে

<style scoped type="text/css" ng-if="...">

</style>

তবে আজকাল কেবল ফায়ারফক্স স্কোপড স্টাইলগুলিকে সমর্থন করে।


1

এখানে আরও একটি বিকল্প রয়েছে যা আমি সম্প্রতি আবিষ্কার করেছি যে কিছু লোকের পক্ষে এটি দরকারী হিসাবে খুঁজে পেতে পারে কারণ এটি আপনাকে স্টাইলের উপাদানগুলির মধ্যে একটি সিএসএস নিয়ম পরিবর্তন করতে দেয় - এভাবে এনজি-স্টাইল, এনজি-ক্লাসের মতো কৌণিক নির্দেশের বারবার ব্যবহারের প্রয়োজন এড়ানো যায়, এনজি-শো, এনজি-লুকান, এনজি-অ্যানিমেট এবং অন্যান্য।

এই বিকল্পটি পরিষেবা ভেরিয়েবল সহ একটি পরিষেবা ব্যবহার করে যা একটি নিয়ামক দ্বারা সেট করা হয় এবং একটি অ্যাট্রিবিউট-ডাইরেক্টিভ দ্বারা দেখা হয় আমি "কাস্টম-স্টাইল" বলি। এই কৌশলটি বিভিন্ন উপায়ে ব্যবহার করা যেতে পারে এবং আমি এই ঝাঁকুনির সাথে কিছু সাধারণ দিকনির্দেশনা দেওয়ার চেষ্টা করেছি ।

var app = angular.module('myApp', ['ui.bootstrap']);
app.service('MainService', function(){
    var vm = this;
});
app.controller('MainCtrl', function(MainService){
    var vm = this;
    vm.ms = MainService;
});
app.directive('customStyle', function(MainService){
    return {
        restrict : 'A',
        link : function(scope, element, attr){
            var style = angular.element('<style></style>');
            element.append(style);
            scope.$watch(function(){ return MainService.theme; },
                function(){
                    var css = '';
                    angular.forEach(MainService.theme, function(selector, key){
                        angular.forEach(MainService.theme[key], function(val, k){
                            css += key + ' { '+k+' : '+val+'} ';
                        });                        
                    });
                    style.html(css);
                }, true);
        }
    };
});

1

ভাল আমি আপনাকে পরামর্শ দিচ্ছি যে কোনও ফাংশন সত্য বা মিথ্যা দিয়ে আপনার নিয়ামকের শর্ত পরীক্ষা করতে ।

<div class="week-wrap" ng-class="{today: getTodayForHighLight(todayDate, day.date)}">{{day.date}}</div>

এবং আপনার নিয়ামকের মধ্যে শর্তটি পরীক্ষা করুন

$scope.getTodayForHighLight = function(today, date){
    return (today == date);
}

0

একটি বিষয় দেখতে হবে - যদি সিএসএস স্টাইলে ড্যাশ থাকে - আপনাকে অবশ্যই সেগুলি সরিয়ে ফেলতে হবে। আপনি যদি সেট করতে চান background-colorতবে সঠিক উপায়টি হ'ল:

ng-style="{backgroundColor:myColor}" 

5
না, আপনার দরকার নেই। এনজি-স্টাইল = "background 'ব্যাকগ্রাউন্ড-কালার': মাই কালার}" পুরোপুরি ভালভাবে কাজ করে।
গেরাসালাস

0

আমি এখানে কীভাবে শর্তাধীন অক্ষম বোতামটিতে ধূসর পাঠ্য শৈলী প্রয়োগ করেছি

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

@Component({
  selector: 'my-app',
  styleUrls: [ './app.component.css' ],
  template: `
  <button 
    (click)='buttonClick1()' 
    [disabled] = "btnDisabled"
    [ngStyle]="{'color': (btnDisabled)? 'gray': 'black'}">
    {{btnText}}
  </button>`
})
export class AppComponent  {
  name = 'Angular';
  btnText = 'Click me';
  btnDisabled = false;
  buttonClick1() {
    this.btnDisabled = true;
    this.btnText = 'you clicked me';
    setTimeout(() => {
      this.btnText = 'click me again';
      this.btnDisabled = false
      }, 5000);
  }
}

এখানে একটি কার্যকারী উদাহরণ:
https://stackblitz.com/edit/example-conditional-disable-button?file=src%2Fapp%2Fapp.componal.html

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.