Skip to content

CONDITIONAL RENDERING, SHOW/HIDE

Overview

When it comes to handle specific part of a component/UI in order to hide/unhide or render conditionally, Stilljs provides with a proper directive.

The (showIf) - showIf Directive example:

As the directive itself suggests, this directive will show a content If the assigned flag matches the stated condition, in case the condition is not matched, it'll hide the content.

It's mandatory to specify the container (see container directive) when using (showIf) directive, and, in the container itself, we place our condition as follow bellow:

This is the template code snippet
1
2
3
4
5
6
7
8
9
<div>
    <p>
        Click to hide/unhide the date
    </p>
    <button (click)="handleShowDate()">Hide/Unhide date</button>
    <div (showIf)="self.showDate">
        Today is @todayDate
    </div>
</div>
This is the component code snippet
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
// Because we don't need to listen to changes, the variable is turned to Prop
/** @Prop */
todayDate = new Date().toDateString();

/** @Prop */
showDate = true;

handleShowDate() {
    this.showDate = !this.showDate;
}

In the above example, the flag need to be boolean, in this case it will be checked that if it's true, then the data will be showed, otherise (if false), it'll hidden.

It's also possible to negate the (showIf) - renderIf flag by putting ! before the flag itself, if that's the case we'll have the code as follow:

<div (showIf)="!self.showDate">


Using expresion as flag

It's also possible to use expression when using the (renderIf) directive, for that, the expression needs to produce a boolean result as follow:

This is the template code snippet
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<div>
    <nav>
        <div>
            <button (click)="showOption(2)">2</button>
            <button (click)="showOption(3)">3</button>
            <button (click)="showOption(5)">5</button>
        </div>
    </nav>
    <p>The bellow content is presente acoordng to the flag assigned value</p>
    <div (showIf)="self.checkFlag==5">Contante when flag is 5</div>
    <div (showIf)="self.checkFlag==3">Whrn flag is 3 this is the content</div>
    <div (showIf)="self.checkFlag==2">Flag value was assigned with 2</div>
</div>
This is the component code snippet
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
/** @Prop */
isMainFlag = true;

/** @Prop */
checkFlag;

// Set the initial value for checkFlag  
// when the component got initiated
stAfterInit(){
    this.checkFlag = 3;
}

showOption(val){
    this.checkFlag = val;
}


The (renderIf) Directive example:

The (renderIf) directive will not render the UI part if the flag value is false, whereas (showIf) hides only giving the possibility of unhiding it afterwards.

Unlike (showIf), the (renderIf) is flaged with a boolean only, means, expressions kind of flagging is not supported.