I have a pretty large dom-repeat that takes 10 seconds to fully render on screen. Is there anyway to render part of dom-repeat, step-by-step until it is fully rendered?
<template is="dom-repeat" items="{{itemList}}">
<span>{{item}}</span>
</template>
The list is about 16000 entries long, so long because in my app it is a triple nested dom-repeat. I use this to render paper-menu and paper-submenu
A polymer pagination component can help you.
Have a look into polymer pagination component in
customelements.io or
mercury-paginator
Related
I have a React component
<Text>
<div dangerouslySetInnerHTML={{ __html: apiContent}} />
</Text>
that displays HTML coming from an API that may look like the following:
<div>
<p>text</p>
<p>more text</p>
<p>more text</p>
<p>more text</p>
<p>still more text</p>
</div>
How do I insert an image, which is another React component, between the 2nd and 3rd p tag?
I know how to do it in vanilla JS, but have trouble doing it the React way.
I'd be curious to see the other answers, but I feel like inserting a React component inside some raw HTML is pretty much impossible. The options I can think of are:
use some library to turn the raw HTML into a tree of React components, and hopefully this library will also include a way to inject custom components in specific places (I don't know any such library, but there probably is one)
edit the raw HTML to insert an empty container with a unique id at the place you need it (for instance by parsing the HTML into a DocumentFragment, using vanilla JS to insert a div, turning it back into a string, and setting it as innerHTML as you already do), and then use a React portal to inject a React component into that container. Pretty messy...
If it is a react component then it is not html so not logical to put it inside dangerouslySetInnerHTML tag.
you need to rewrite this react component to an HTML string and work with the html that is coming from API as a string.
that means you can split the incoming string of html on the second closing p tag
and add the new html string in the middle.
I'm very new to typescript.
I've got a wrapper component, and a bunch of child components that I want to display.
So, something like this is in my parent component html: <component-card [someData]=someData></component-card> works just fine and displays my component. But how do I display a list of them?
Simply doing <li *ngFor="let card of componentCardArray"></li> doesn't work. I tried different ways
Most tutorials just cover simple types, I searched for hours and can't find a way to do it.
Okay, I figured it out! I was forgetting to put the selector after the whole *ngFor directive thing. So, here is how my components are displayed now in my wrapper.html:
<div *ngFor="let card of cardArray">
<component-card [myData]=myData></component-card>
</div>
i am new in hybrid application development and want to make a advance carousel like http://sebelga.github.io/ionic-advanced-carousel/demo/ for ionic 3 application. i tried this link but its not working with ionic 3 or may be i did it wrong. i want this for taking user selection. is there any library for this? if you have any material like this for ionic 3 and angular 4 kindly share the link or code.
thanks in advance.
You need to leverage Slides component: https://ionicframework.com/docs/components/#slides
Slides component can be configured to have multiple slides visible at a time on the screen (see documentation). So what you want can be achieved via slides.
If you struggle with it - let me know with what exactly.
Here is a snippet of the "view" where I use variables to define amount of slides I need to show in the view:
<ion-slides "bottomPanelSlides" no-padding lazyLoading [slidesPerView]="slidesPerView">
<ion-slide *ngFor="let slide of slides; let i = index" [attr.data-index]="i" (click)="processItem($event, i); storylineAdd();">
<img [hidden]="sliderLoading" (load)="revealSlides();" src="./assets/img/filtersubject.png" [attr.data-index]="i"/>
</ion-slide>
</ion-slides>
In my example I show small images in a horizontal listview fashion. But you could do text for sure.
So, over the past week I have looked at loading multiple galleries at once. I have been working in MeteorJS with blaze templates but, the methods I am using aren't working.
Essentially, all my data comes from multiple MongoDB collections which are organized in one main collection. When the website starts, I want to access the list of current collections and for each collection display a gallery of photos.
(Main Photo Page)
{{#each collections}}
{{>gallery collectionName=collectionName}}
{{/each}}
(Gallery Template)
<Template name="gallery">
{{getPhotos}}
</Template>
I have tried using a reusable blaze template that is fed the data and then runs a helper to display the images. It works, but I am having trouble loading only one template/collection at a time. I want to load one first, when that is done, load the next etc.
I have also wondered about using ReactJS for this with MeteorJS on the backend, but before I start, I'm wondering about how easy is it to load components one by one vs templates?
Thanks for any ideas or help!
You could try merging the cursors in a helper, instead of inside the template. This will force the order you like and still be reactive since the find is in a reactive context (the helper).
(HTML)
<Template name="gallery">
{{#each getPhotos}}
<img src="{{this.src}}">
{{/each}}
</Template>
(js)
'getPhotos':function(){
let mergedCursor = [];
for (collectionObject in Template.currentData().collections){
//not clear how you are getting the collections
mergedCursor.concat(collectionObject.find().fetch());
}
return mergedCursor;
}
You could also import the collections in the same js file and merge them directly.
My page is divided into sections : #page-1 and #page-2
See Plnkr: http://plnkr.co/edit/RZJLmsWDfs63dC0QuDJi
<body>
<section id="page-1">
This is page 1. It takes the whole height of the browser. User has to scroll down to see page-2.
</section>
<section id="page-2">
<span class="animated bounce">This is page 2 </span>
</section>
</body>
Animation classes are being applied to different elements in #page-2.
However by the time the user scrolls down to these elements, the animation has already finished. Hence they just look like static objects.
Is there anyway I can detect when #page-2 is currently being viewed and then call a function to addClass('animated bounce') to certain elements ?
I would like to achieve this in angularjs if possible
I have found a angularjs directive that is probably helpfull for you in this case. Inview tries to solve this exact problem by reporting to you if a dom element is visible on the screen. Unfortunately I have been unable to test my solution because I couldn't find a minified js file of Inview but I assembled some code that should work:
<section id="page-2" in-view="{$inview ? isFocused=true;}">
<div ng-class="{'animated bounce': isFocused}">This is page 2 </div>
</section>
The $inview is supposed to be true whenever the element is in visible in the browser. This leads to the scope variable isFocused being set to true and therefor the animation class is added to your div.
This should work as you have intended in your question, if it does not work for some reason please let me know so I can improve my answer.