I'm trying to do a treeview in my component.html this is my code :
<div *ngFor="let item of menusList">
<div class="containerMenu">
<span [ngClass]="{collapseTitle:item.SubItems.length}">
<i [ngClass]="item.SubItems.length ? 'fa fa-angle-down' : ''"></i>
<span style="display:inline-block">
<span>{{item.Title.Traductions.French}}</span>
</span>
</span>
<div *ngIf="item.SubItems.length" ng-include="'menu'" class="collapsePanel"></div>
</div>
</div>
<!--Submenu Template + Récursive-->
<ng-template #menu>
<ul>
<li *ngFor="let item of item.SubItems">
<span ng-if="!item.Url" ng-class="{collapseTitle:item.SubItems.length}">
<i ng-class="item.SubItems.length ? 'fa fa-angle-down' : ''"></i>
<span ng-class="item.SubItems.length ? 'subItemsTitle' : ''">
<span style="display:inline-block">
<span>{{item.Title.Traductions.French}}</span>
</span>
</span>
</span>
<a target="_blank" href="{{item.Url}}" ng-if="item.Url">
<span ng-class="item.SubItems.length ? 'collapseTitle' : ''">
<i ng-class="item.SubItems.length ? 'fa fa-angle-down' : ''"></i>
<span ng-class="item.SubItems.length ? 'subItemsTitle' : ''">
<span style="display:inline-block">
<span>{{item.Title.Traductions.French}}</span>
</span>
</span>
</span>
</a>
<div *ngIf="item.SubItems.length" ng-include="'menu.html'" class="collapsePanel"></div>
</li>
</ul>
</ng-template>
So, my first div cross all my array(menusList) and if the current position have subitems, it should include the template#menu. This is working in AngularJS, but I want to do it in Angular2.
I have no error in my console, and I think my problem is the ng-include
Thanks for your help.
According to this comment in issue #2753, ng-include is not supported in Angular 2+.
You can, however, wrap your ng-template into another component, with SubItems as input. That way you can recursively call the same component, achieving the desired result.
Related
I want to trigger a dropdown menu via hover so use #mouseover. But when the cursor places between text and chevron, dropdown becomes hide. I use mouseover with a tag so it should contain text and chevron, shouldn't it?
here's my code
<header class="relative z-50" x-data="{ dropdown: '' }">
<nav class="overflow-hidden z-50">
<div class="container space-x-14 py-7 desktop:justify-start flex items-center z-50">
<nav class="space-x-14">
<a #mouseover="dropdown = dropdown === 'open' ? '' : 'open'" class="cursor-pointer font-semibold">
<span class="border-b-2 pb-2 transition duration-300" :class="dropdown === 'open' ? 'border-seaweed' : 'border-transparent'">{{ __('test1') }}</span> <span class="inline-block bg-caret-down bg-center bg-no-repeat w-4 h-2"></span>
</a>
what is the prolem?
To fix this, we need to embed the two <span> elements into a <div> where we add the pointer-events-none class (assuming you are using TailwindCSS) to disable the pointer events of the child elements. Furthermore we also add the #mouseleave event to change the open state.
<a #mouseover="dropdown = 'open'"
#mouseleave="dropdown = ''"
class="cursor-pointer font-semibold">
<div class="pointer-events-none">
<span class="border-b-2 pb-2 transition duration-300" :class="dropdown === 'open' ? 'border-seaweed' : 'border-transparent'">{{ __('test1') }}</span>
<span class="inline-block bg-caret-down bg-center bg-no-repeat w-4 h-2"></span>
<div>
</a>
MY SLIDER OF CATEGORY TEST IS DISPLAYED THIS WAY IN THE PICTURE i.e images appear below each other
enter image description here...I have tried change the category test with another category but i could not fix it.. i guess the issue mighty be how to display the active image slide first then the rest come after-wards
My view blade is
#foreach ($data['testSlider'] as $slide )
<div class="carousel slide" data-ride="carousel" id="carousel-1">
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="w-100 d-block" id="imgslide" src= "{{asset('images/' . $slide->image)}}" alt="Slide Image">
</div>
</div>
<div>
<a class="carousel-control-prev" href="#carousel-1" role="button" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carousel-1" role="button" data-slide="next">
<span class="carousel-control-next-icon"></span>
<span class="sr-only">Next</span>
</a>
</div>
<ol class="carousel-indicators">
<li data-target="#carousel-1" data-slide-to="0" class=""></li>
<li data-target="#carousel-1" data-slide-to="1"></li>
<li data-target="#carousel-1" data-slide-to="2"></li>
</ol>
</div>
#endforeach
MY SLIDER CONTROLLER HAS
use Illuminate\Http\Request;
use App\Models\website\backend\Slider;
use App\Models\website\backend\SliderCategory;
public function test()
{
$data['slider'] = Slider::all();
$data['slidercategory'] = SliderCategory::all();
$data['testSlider'] = Slider::with([
'SliderCategory' => function ($attachmentQuery) {
$attachmentQuery->where('title', 'test Slider');
}
])->get();
return view('testboot', compact('data'));
}
Your images are repeating because you are making an entire carousel for each image instead of adding the images to the first carousel.
<div class="carousel slide" data-ride="carousel" id="carousel-1">
<div class="carousel-inner" role="listbox">
#foreach ($data['testSlider'] as $slide )
<div class="carousel-item {{ $loop->first ? 'active' : '' }}">
<img class="w-100 d-block" id="imgslide-{{$loop->index}}" src= "{{asset('images/' . $slide->image)}}" alt="Slide Image">
</div>
#endforeach
</div>
<div>
<a class="carousel-control-prev" href="#carousel-1" role="button" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carousel-1" role="button" data-slide="next">
<span class="carousel-control-next-icon"></span>
<span class="sr-only">Next</span>
</a>
</div>
<ol class="carousel-indicators">
#foreach ($data['testSlider'] as $slide )
<li data-target="#carousel-1" data-slide-to="{{ $loop->index }}" class="{{ $loop->first ? 'active' : '' }}"></li>
#endforeach
</ol>
</div>
I'm working on a carousel webpart with a text/xml transformation.
Simply trying to create a unique ID for each instance on the page.
Next I'd like to have the first item set to active with a CSS class.
For the section Webpart container:
{% uniqueId = string.FormatString("carousel-{0}", InstanceGuid.Substring(0,5)); #%}
<div id="{%uniqueId%}" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
□
</div>
<a class="carousel-control-prev" href="#{%uniqueId%}" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#{%uniqueId%}" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
This seems to work at first but for some reason it generates a text-node in HTML.
How can we do this without generating the variable output?
For a single carousel item in the Transformations section:
{% CssActive = IsFirst() ? "active" : string.Empty %}
<div class="carousel-item {%CssActive%}">
<img src="{%Image%}" alt="" class="w-100 d-block" />
<div class="carousel-caption d-none d-md-block">
<h3>{%Title%}</h3>
<div>{%Body%}</div>
</div>
</div>
This doesn't output anything? Is this even possible to use IsFirst() in a repeater?
Any help is much appreciated!
For the transformation you can use the following code:
<div class="carousel-item{% if (DataItemIndex == 0) { " active" } #%}">
<div class="card">
<img src="{%Image%}" alt="" class="card-img-top" />
<div class="card-body">
<h3 class="card-title">{%Title%}</h3>
<div class="card-text">{%Body%}</div>
</div>
</div>
</div>
Doc
For the Webpart container I can do a workaround with HTML/CSS:
<div class="d-none">
{% uniqueId = string.FormatString("carousel-{0}", InstanceGuid.Substring(0,5)); #%}
</div>
Far from ideal so if anybody else has a better idea ...?
i have the below code that everything runs fine except the check to see if the value is null. I know the value being returned is null, yet it still doesn't work. I've tried having == null both within and outside the {} to no avail.
Maybe it has something to do with how hibernate is returning the value? When i print out the object returned from the db it says null.
<div th:each="timecardLast: ${timecardLast}">
<a th:href="#{/timecardin}">
<div th:if="${timecardLast.status == null}" style="width: 100%" class="waves-effect card-panel green darken-1 z-depth-4">
<div class="card-content center-align">
<i class="medium material-icons white-text">timer</i>
<h5 class="white-text">SIGN IN TO WORK</h5>
</div>
</div>
</a>
<a th:href="#{/timecardin}">
<div th:if="${timecardLast.status} == 1" style="width: 100%" class="waves-effect card-panel green darken-1 z-depth-4">
<div class="card-content center-align">
<i class="medium material-icons white-text">timer</i>
<h5 class="white-text">SIGN IN TO WORK</h5>
</div>
</div>
</a>
<a th:href="#{/timecradin}">
<div th:if="${timecardLast.status} == 2" style="width: 100%" class="waves-effect card-panel deep-orange darken-2 z-depth-4">
<div class="card-content center-align">
<i class="medium material-icons white-text">timer</i>
<h5 class="white-text">SIGN IN TO WORK</h5>
</div>
</div>
</a>
<a th:href="#{/timecardout}">
<div th:if="${timecardLast.status} == 0" style="width: 100%" class="waves-effect card-panel deep-orange darken-2 z-depth-4">
<div class="card-content center-align">
<i class="medium material-icons white-text">timer_off</i>
<h5 class="white-text">SIGN OUT OF WORK</h5>
</div>
</div>
</a>
</div>
The syntax for lists in Thymeleaf is naming the element and naming the list. You have both names for the same thing. So you may want instead:
<div th:each="timecard: ${timecardList}">
...
<div th:if="${timecard.status == null}"...>
...
After adding a list of objects called timecardList to the model.
Took a step back and looked at how i was creating the object. I was not initializing the object first i.e.
Timecard timecardLast = timecardService.getLastTimecardByIdusers(staff);
So, a simple initialization of the object properly did the job followed by the db request i.e.
timecardLast = new Timecard();
timecardLast = timecardService.getLastTimecardByIdusers(staff);
I'm trying to include SB-Admin2 theme using a Spring Roo generated project (using bootstrap, tiles and JSP) but something is going wrong. I have icons corresponding to fa-search font-awesome tags that are displayed on the page.
It seems, that they have been generated when JSP tiles have been processed because they do not appear in my code.
<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse">
<ul class="nav" id="side-menu">
<li class="sidebar-search">
<div class="input-group custom-search-form">
<input type="text" class="form-control" placeholder="Search..."></input>
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
<!-- /input-group -->
</li>
<tiles:insertAttribute name="menu" ignore="true" />
</ul>
</div>
<!-- /.sidebar-collapse -->
</div>
File "menu.tagx" is :
<c:if test="${empty render or render}">
<li>
<jsp:doBody />
</li>
</c:if>
And file "items.tagx" is:
<c:if test="${empty label}">
<spring:message code="menu_item_${fn:toLowerCase(fn:substringAfter(id,'_'))}_label" var="label" htmlEscape="false" />
</c:if>
<c:if test="${not empty messageCode}">
<spring:message code="${messageCode}" var="label" arguments="${label}" htmlEscape="false" />
</c:if>
<li>
<spring:url value="${url}" var="menu_item_url"/>
<a href="${menu_item_url}" title="${fn:escapeXml(label)}">
<c:out value="${label}"/>
</a>
</li>
Generated code in Chrome inspector is:
<div role="navigation" class="navbar-default sidebar">
<div class="sidebar-nav navbar-collapse">
<ul id="side-menu" class="nav">
<li class="sidebar-search">
<div class="input-group custom-search-form">
<input placeholder="Search..." class="form-control" type="text">
<span class="input-group-btn">
<button type="button" class="btn btn-default">
<i class="fa fa-search"></i></button>
</span>
</div>
</li>
<div version="2.0" id="menu">
<li><h2><i class="fa fa-search">Party</i></h2>
<ul>
<li><i class="fa fa-search"><a title="Create new Party" href="/demo/partys?form">Create new Party</a></i></li>
<li><i class="fa fa-search"><a title="List all Partys" href="/demo/partys?page=1&size=10">List all Partys</a></i></li>
<li><i class="fa fa-search"><a title="Find by Last Name" href="/demo/partys?find=ByLastName&form&page=1&size=10">Find by Last Name</a></i></li>
</ul>
</li>
</div>
</ul>
</div>
</div>
Where do the <i class="fa fa-search"> elements come from? How to remove them?
Thank you very much for your help. Denis
Thank you for your tips ! I have finally found where it comes from...
If you don't put content (for instance a comment) between opening and closing tags processed by font-awesome CSS, parser will generate icons in front of all text areas displayed.
To avoid this, you must properly declare tags in your JSP like this:
<i class="fa fa-search"><!-- Some content --></i>
And not:
<i class="fa fa-search"></i>
Hope this help.