How to customize cell template for week view? We have necessity of show a popover on segment time clicked (there are more check about this), and i want change the template of [hourSegmentTemplate].
Can you send an example?
Thank you
Edit:
I use this component.
I want to change the default week view, thanks [hourSegmentTemplate] attribute:
<mwl-calendar-week-view
*ngSwitchCase="CalendarView.Week"
[viewDate]="viewDate"
[hourSegmentTemplate]="weekView"
[events]="events"
[refresh]="refresh">
</mwl-calendar-week-view>
<ng-template #weekView let-segment="segment" let-locale="locale">
<div
class="cal-hour-segment"
[class.cal-hour-start]="segment.isStart"
[class.cal-after-hour-start]="!segment.isStart"
[ngClass]="segment.cssClass">
<span class="cal-time">
{{ segment.date | calendarDate:'dayViewHour':locale }}
</span>
This is some custom content
</div>
But the result is
this
I want only the hours on the left, and the possibility to manage a single template's cell.
If you using ng-template, you have access to a context variable isTimeLabel which has a boolean value which describes where the time label is.
This is a solution for your example:
<ng-template #weekView let-segment="segment" let-locale="locale" let-isTimeLabel="isTimeLabel">
<div *ngIf="isTimeLabel">
</div>
</ng-template>
Related
<div class="flex">
<div class="layout-row layout-align-end-center">
{{#paper-button href="overview" raised=true primary=true}}Overview{{/paper-button}}
{{#paper-button href="incomes"}}Incomes{{/paper-button}}
{{#paper-button href="expenses"}}Expenses{{/paper-button}}
{{#paper-button href="settings"}}Settings{{/paper-button}}
</div>
</div>
So I am trying to set the raised=true whenever I am on certain page/template. The above code is from my application template. Is there any way of doing this using JS/Ember or should I just do it manually in each of my templates?
I think the best way to go is to write a custom component wrapping paper-button. ember-route-helpers gives you nice helpers to do that:
{{#paper-button
onclick={{transition-to #route)
href=(url-for #route)
raised=(is-active #route)
primary=(is-active #route)
}}
{{yield}}
{{/paper-button}}
Then you can use that component with {{#your-component route="settings"}}Settings{{/your-component}}.
It's important to understand that you should pass both the action and the href. Because then when people click on the button it will make a transition and dont reload the entire page, but rightlick->open and screenreaders are are not broken.
I want to build a multi-step form, where each step is its own tab and the user can go forward/backwards through the form. Each tab has a header, content and navigation buttons.
In my form component, I have an array of all components (each represents a step in the form) and I want to loop through it in the form's template, so that each step has the same structure and if I want to change that structure I should only change the code in the loop, as it's the same for all steps.
This is the array in the form.component.ts:
steps = [
LanguageComponent,
CodeComponent,
HardwareComponent,
SubmissionComponent
]
Or should it be:
steps = [
new LanguageComponent,
new CodeComponent,
new HardwareComponent,
new SubmissionComponent
]
?
This is the pseudo form.component.html:
<div id="tabs">
<div class="tab" *ngFor="let step of steps" id="{{step.header}}">
{{ step.header }}
<app-step></app-step>
{{ buttons }}
</div>
</div>
Each step component has header property.
That way, in order to change the structure of the tab, I only have to change it here once, if the header and buttons go inside each components' template, then I will have to change each component's template, if I want to change the tab structure.
How would you do this, is there a better way to achieve this structure?
Thank you!
You need a placeholder component that houses the form tab structure. Then like you said you only have 1 place that you would have to change the layout.
AppFormTabComponent.html
<ngb-tabset>
<ngb-tab>
<ngbTemplate>
<language-component [form]="form"></language-component>
</ngbTemplate>
</ngb-tab>
<ngb-tab>
<ngbTemplate>
<code-component [form]="form"></code-component>
</ngbTemplate>
</ngb-tab>
...
</ngb-tabset>
Then you would only call your AppFormTabComponent once to use it
form.component.html
<app-form-tab-component [form]="form"></app-form-tab-component>
And your form would be in the app.component.ts page and you would pass the form in to each one of your templates.
I'm trying to clone the ng-content items of a component along with any functionality added on the HTML of that content. For example, the markup using the component might look like this:
<custom-component>
<button (click)="doAThing();">A button</button>
</custom-component>
Then I set up my template for custom-component like so:
<ng-template #content>
<ng-conent></ng-content>
</ng-template>
<ng-template *ngTemplateOutlet="content"></ng-template>
<div class="second-area>
<ng-template *ngTemplateOutlet="content"></ng-template>
</div>
My expectation would be that the ng-content would get duplicated into both ngTemplateOutlet areas. What happens is that it pushes to the last outlet and ignores the first. This markup will duplicate normal markup just fine, but ng-content only move to one outlet.
Is this not possible with this technique, am I missing something obvious, or it there another way to clone the contents of ng-content along with any events attached to it?
I found this solution that worked for me. First the HTML, you'll need a directive to wrap the content in so you can reference it. You'll need to use asterisk with directive so it can be duplicated.
<custom-component>
<ng-container *customDirective>
<button (click)="doAThing();">A button</button>
</ng-container>
</custom-component>
The directive doesn't require any extra code. We just need it for a reference.
In your custom-component, you'll need to create a reference to the diretive via #ContentChild like so:
#ContentChild(CustomDirective, { read: TemplateRef }) transcludeTemplate;
Then we use the following for our custom-component HTML avoiding using ng-content tags all together:
<ng-template *ngTemplateOutlet="transcludeTemplate"></ng-template>
<div class="second-area>
<ng-template *ngTemplateOutlet="transcludeTemplate"></ng-template>
</div>
So this isn't really the same as duplicating <ng-content>, but it gives us a similar function. Apparently ng-content not multiplying is intended behavior. So this might be the best way to achieve a similar goal.
I am new to pagination and I found this directive which is highly sought after for Angular JS from what I have read. I am trying to implement the pagination to work with a my custom pagination html/css layout I have created.
The pagination slightly works as the number of pages show up correctly and the number of items being shown is correct as I specified. The problem however is clicking for example page 2 in the pagination list does not load the next list of 5 items. It simply stays on the same list.
I am a bit confused how to use all the parts properly of this directive so I believe I am doing something wrong with implementing this directive.
The guides I am following is found here which is the same as the repository above.
Downloaded files and added to project:
dirPagination.js
My HTML is as follows:
<div id="pages" ng-if="1 < pages.length || !autoHide">
<span ng-class="{ active : pagination.current == pageNumber,
disabled : pageNumber == '...' }" class="pagenumber"
dir-paginate="pageID in controller.list| filter:q | itemsPerPage:
controller.pageCount" current-page="controller.currentPage">
{{ pageID.id }}
</span>
</div>
<div class="myResults" dir-paginate="results
in controller.list| filter:q | itemsPerPage: 5" current-page="1">
<div class="listFigures">
<figure class="imageList">
<img ng-src="{{results.image}}" ng-alt=
{{results.imageAlt}}" ng-title=
{{results.imageTitle}}" />
</figure>
</div>
</div>
In my controller I have pageCount set based on how many items (it is used as a parameter and works for showing how many pages for now):
vm.pageCount=2;
vm.currentPage = 1;
Working:
The list of pages is showing, following the code above you will see that it is at 8 pages.
Only 5 items are displaying as indicated
Not working:
Clicking on another page (in this case 2) does not bring me to another page of data. The list does not get refreshed. Clicking on another page number keeps the same list of 5 items displaying. There are a total of 8 items, with 5 being displayed clicking on the 2nd page number should show the last 3.
Posts researched:
dirPagination does not work (Angular JS pagination)
Pagination with AngularJS?
dir-pagination directive angularjs : is there any way I can get all the records of current page in pagination?
I am confused about how to get this working as well if my implementation is completely off. I have read a few posts as well as try do follow the guide in the repository however I am not understanding how to use it correctly. I am interested in finding out how to implement this pagination directive with custom html/css and not using the dirPagination.tpl.html template.
Following best practices you can read here for standard Angular.
You hardcoded your current page in the directive at the end:
<div class="myResults" dir-paginate="results in controller.list| filter:q | itemsPerPage: 5" current-page="1">
To get it working you need to set it to the variable that holds your current page. You can compare your code to the plunker provided by Pagination Directive http://plnkr.co/edit/Wtkv71LIqUR4OhzhgpqL?p=preview at line 42.
After picking apart the code on Plunker found here as well as the template that comes with the download of the directive dirPagination.tpl.html I found out how to successfully utilize is without using the template. You cannot skip anything. Must use lists must use most of the tags provided by the template that are being used with dirPagination.js.
Here is the working solution. Only thing that required changing was in the html:
<div class="results">
<dir-pagination-controls on-page-change="pageChangeHandler(newPageNumber)">
</dir-pagination-controls>
<div class="pages" ng-if="1 < pages.length || !autoHide"
class="pagenumber pagination" dir-paginate="pageID in
controller.list| filter:q | itemsPerPage:5"
ng-class="{ active : pagination.current == pageNumber, disabled :
pageNumber == '...' }">
<ul class="pagination" ng-if="1 < pages.length || !autoHide">
<li ng-repeat="pageNumber in pages track by tracker(pageNumber,
$index)" ng-class="{ active : pagination.current ==
pageNumber, disabled : pageNumber == '...' }">
<a href="" ng-click="setCurrent(pageNumber)">{{ pageNumber }}
</a>
</li>
</ul>
</div>
</div>
Feel free to copy past all that html in your document and use classes I made:
results
pages
pagination
To change the CSS however you like.
Note: Pagination class cannot be removed, even if you take it out of your html if you check you elements when you run the page on the browser you will see that it is placed back in automatically.
Temporary Note: When I figure out how to show the Number of pages in an above tag such as h1 I will add that to my answer.
I am converting someone else's code to Handlebars.js and I'm stuck on converting this tag to its {{#handle-bar}}{{/handle-bar}} counterpart.
The previous coder used an {{#ifCond}} to toggle what 'selected'. This is my component.
{{#dropdown-item }}
{{unbound this.itemName}}
{{/dropdown-item}}
Here is the div i want converted to my component
<div class="dropdownItem" {{bind-attr value=formField_DropdownItemID}}{{#ifCond formField_DropdownItemID value}} selected{{/ifCond}} >
{{unbound this.itemName}}
</div>
My first thought was to just pop the div's logic into the the component, like the next example, but this gave me an error.
{{#dropdown-item bind-attr value=formField_DropdownItemID {{#ifCond formField_DropdownItemID value}} selected{{/ifCond}} }}
{{unbound this.itemName}}
{{/dropdown-item}}
Any suggestions?
You can set those properties to compute. The syntax would be:
{{#dropdown-item selected=computedProperty value=formField_DropdownItemID}}
computedProperty can deal with your conditional logic. The whole idea is to pull that out of handlebars anyways. :)