I have a component in the laravel blade and I want set class or inline style to a component without passing any data but my code not working and mt-5 is not set to x.atom.form component.
My simple code is:
<x-atom.form class="mt-5" :data="$fields->main_form"></x-atom.form>
ِYou assume my component code is:
<section class="contact-form"></section>
resources\views\components\atom\form.blade.php
<section {{ $attributes->merge(['class' => 'contact-form']) }}>
{{-- ... --}}
{{-- ... --}}
</section>
some_file.blade.php
<x-atom.form class="mt-5"></x-atom.form>
docs
ref
ref2
Related
On button click function CSS style to be called with in the TS file
html code:
<div class="overlay-loader">
<div *ngIf="isLoading" class="loader"></div>
<p *ngIf="results">{{ results | json }}</p>
<p *ngIf="error">Error: {{ error | json }}</p>
</div>
<p>
<button (click)="getResult()">Get result</button>
</p>
Link which i have tried:https://stackblitz.com/edit/angular-loader-kspfhg?ctl=1&embed=1&file=app/app.component.html&view=editor
After clicking the button overlay-loader css class to be loaded and once data get fetched css overlay-loader to be dissaper
Use ngClass to add a class conditionally:
<div [ngClass]="{'overlay-loader': isLoading}">
Method render does not exist error also in links() method
this is my blade
blade.php
this is my controller
controller.php
render() isn't used for pagination anymore.
In Laravel 5.4 you use links() to display the links:
<div class="container">
#foreach ($news as $newsItem)
{{ $newsItem->whatever }}
#endforeach
</div>
{{ $news->links() }}
Displaying Pagination Results
When calling the paginate method, you will receive an instance of Illuminate\Pagination\LengthAwarePaginator. When calling the simplePaginate method, you will receive an instance of Illuminate\Pagination\Paginator. These objects provide several methods that describe the result set. In addition to these helpers methods, the paginator instances are iterators and may be looped as an array. So, once you have retrieved the results, you may display the results and render the page links using Blade:
<div class="container">
#foreach ($news as $newsItem)
{{ $newsItem->whatever }}
#endforeach
</div>
{{ $news->links() }}
See more about Laravel 5.4 pagination here
For example I have this component with a simple template:
<div>
<h2>Hello!!!</h2>
</div>
and I want to add this new template tag:
<div>
<h2>Hello!!!</h2>
<div class = "new-tag">
</div>
</div>
How can I do this?
Thanks.
Use a structural directive like *ngIf
<div>
<h2>Hello!!!</h2>
<div *ngIf="showNew" class = "new-tag"></div>
<button (click)="showNew = true">click me</button>
</div>
I want to repeat a piece of HTML, multiple times in my template.
But I want it to be repeated at different places on my page. This means that ngFor is not the solution as the pieces would be repeated directly one after the other.
A 'working solution' would be to define a specific #Component for my repeated HTML, and do something like that :
<p>Whatever html</p>
<my-repeated-html></my-repeated-html>
<h4>Whatever</h4>
<my-repeated-html></my-repeated-html>
But I find it overkill to create a dedicated component for doing something like that, it has no functional meaning and is only required by the HTML structure I want to set up.
Is there really nothing in ng2 template engine to allow me to define an "inner template" and use it wherever I need it in the current template?
update Angular 5
ngOutletContext was renamed to ngTemplateOutletContext
See also https://github.com/angular/angular/blob/master/CHANGELOG.md#500-beta5-2017-08-29
original
The recently added ngTemplateOutlet might be what you want
<template [ngTemplateOutlet]="templateRefExpression" [ngOutletContext]="objectExpression"></template>
It can currently be used like
<template #templateRef>
<pre>{{self | json }}</pre>
</template>
<template [ngTemplateOutlet]="templateRef"></template>
A template can also be passed to a child component to be rendered there
#Component({
selector: 'some-child',
providers: [],
template: `
<div>
<h2>Child</h2>
<template [ngTemplateOutlet]="template" ></template>
<template [ngTemplateOutlet]="template" ></template>
</div>
`,
directives: []
})
export class Child {
#ContentChild(TemplateRef) template:TemplateRef;
}
to be used like
<some-child>
<template>
<pre>{{self | json }}</pre>
</template>
</some-child>
stackblitz example
Another Plunker example
that uses data passed as
<template [ngTemplateOutlet]="..." [ngOutletContext]="templateData"
This way ngOutletContext can be used in the template like
<template let-image="image">
{{image}}
where image is a property of templateData
If $implicit is used
<template [ngTemplateOutlet]="..." [ngOutletContext]="{$implicit: templateData}"
the ngOutletContext can be used in the template like
<template let-item>
{{item}}
<campaign-channels-list (onItemSelected)="_onItemSelected($event)" [customTemplate]="customTemplate" (onDragComplete)="_onDragComplete($event)" [items]="m_blockList"></campaign-channels-list>
<template #customTemplate let-item>
<a href="#" [attr.data-block_id]="item.blockID">
<i class="fa {{item.blockFontAwesome}}"></i>
<span>{{item.blockName}}</span>
<i class="dragch fa fa-arrows-v"></i>
<span class="lengthTimer hidden-xs">
{{item.length | FormatSecondsPipe}}
</span>
</a>
</template>
and in rx component:
<div class="sortableList">
<li (click)="_onItemSelected(item, $event, i)" *ngFor="let item of m_items; let i = index" class="listItems list-group-item" [ngClass]="{'selectedItem': m_selectedIdx == i}">
<template [ngTemplateOutlet]="customTemplate" [ngOutletContext]="{$implicit: item}">
</template>
</li>
</div>
pay attention to:
[ngOutletContext]="{$implicit: item}"
as well as
<template #customTemplate let-item>
I am just starting off with angular, but basically I want to render one set of templates with ng repeat:
<ion-item ng-repeat="item in items" ng-click="loadSingle(item)">
Hello, {{item.name}}!
</ion-item>
and then later I want to render the object in a different template if someone clicks on it:
<div>
<h1>{{ item.name }}</h1>
<h2>{{ item.detail }}</h2>
</div>
How do I do this? With jQuery/underscore I would just have the separate template loaded and feed it the json object (item) but I can't seem to find any documentation on how to do the templating without the ng-repeat. I'm a little confused. Thanks!
I would define loadSingle() as a method that would put the specific item onto the scope. Then I would define another section in the HTML to display the selected item.
JavaScript
app.controller('ctrl', function($scope){
$scope.loadSingle = function(item){
$scope.selectedItem = item;
}
});
HTML
<div ng-show="selectedItem">
<h1>{{ selectedItem.name }}</h1>
<h2>{{ selectedItem.detail }}</h2>
</div>