Disable Whole Div Content Using Angular 2

Friday, 14 October 2016 | Posted by
AngularJS provides disabled for disabling input fields, It wont work for DIV elements. For DIV elements, we have to show another DIV on top of the present div element. The cover DIV won't be have any content and it is transparent. Users can see content through this cover div.
Source Code          DEMO

CSS

.disable-whole-div__myDIV {
    overflow: scroll;
    height: 300px;
    border: 1px solid #ccc;
    margin: 10px;
    width: 300px;
    cursor: pointer;
    position: relative;
}

.disable-whole-div__cover {
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: 1;
    background-color: #ddd;
    opacity: 0.3;
}

Markup

Observe below highlighted code
<button (click)="disableDIV = true">Disable Below UI</button>
<button (click)="disableDIV = false">Enable Below UI</button>

<div class="disable-whole-div__myDIV">
    <div class="disable-whole-div__cover" [hidden]="!disableDIV"></div>
    div 1 <br /> <a href="">link 1</a>
</div>
Labels:

4 comments:

  1. navyatejareddy11 February 2018 at 23:54

    super dude

    ReplyDelete
  2. Unknown27 June 2018 at 05:28

    not working dude

    ReplyDelete
  3. Unknown27 June 2018 at 05:28

    Its allowing to change the value of the elemnets

    ReplyDelete
  4. 515i051vdo12 January 2023 at 04:08

    Make certain you realize which ones feature the 온라인 바카라 bonuses you’re after to make your recreation time more pleasant. – These cater particularly to the casino’s huge stakes players, who place high-end bets and live for high-end rewards. – This bonus permits you to test the sport earlier than having to use any of your individual cash.

    ReplyDelete

Subscribe to: Post Comments (Atom)

Blogroll

Popular Posts