I have to add tab content (primeng cards with content) dynamically into tabview using primeng in Angular 8. am trying with ComponentFactoryResolver to generate component dynamically . Please suggest best way to do.
i have attached image for reference.
<p-tabView class="ui-g-12 ui-g-nopad ui-widget-content ui-corner-all ui-no-border" [activeIndex]="index" (onChange)="onProductSelect($event)" >
<p-tabPanel #tabContent *ngFor="let product of productNames; let i = index;let first = first;" [selected]="first" [disabled]="isAllowedAccess"[enter link description here][1]
[header]="'Profile ' + product.productName" lazy="true">
// <div>Content</div> tab content which is list of cards with content.here i have to add components dynamically
</p-tabPanel>
</p-tabView>
You can use an *ngFor inside the p-tabContent to render all the cards. This would be standardAngular and not related to primeNG
<div *ngFor="let mortgage of mortgages">
... render the content
</div>
What am I missing?
Related
I have created an menu using JSON data in angular JS. Menu is created and works the way expected. Menu has 6 tabs i.e. HOME,ABOUTUS,CONTACTUS,SERVICES,LOGIN,REGISTER on load first home page will be displayed, when about us is clicked only container data will be changed to display about us and its working fine (ngroute routing concept used) similarly other pages contactus, login, register will be routed to different pages and works fine.
Now when SERVICES tab is is clicked a dropdown should be displayed with the submenuItems "CAR TRADE","BIKE TRADE","AUTO LOAN", "INTEREST RATE".
I am facing issue in creating a submenu dropdown. I am from legacy background and learning web development and working on angular js project. Your help is appreciated.
I worked on submenu it was disaster so i have taken the useful stuff off and only working code is below:
<div class="row secondarynavbar">
<div class="col-lg-12 navigation-bar" ng-controller="menuCntrl">
<ul ng-repeat="menu in menulist">
<li>
{{menu.menuItem}}
</li>
</ul>
</div>
</div>
Here is the HTML code which creates menu from JSON data.(Works fine)
Simple angular code to get json data...(works fine)
app.controller('menuCntrl',function($scope,$http){
$http.get('data/menujson.json').success(function(data){
$scope.menulist = data;
}) });
Please help in taking it forward.
I am using Angular ui-router to navigate pages and flexbox as a grid type solution. I am attempting to reproduce Google Image Search Result look where the black expanding div opens under the selected image. I also need the route to change when the image is selected which I have working. However the div opens after all the divs in the row. Now after the row which the selected item is located. Any help on a ng-if, directive or script that could help me do this would be greatly appreciated.
EDIT: After thinking about it more I think I would need a script/directive that detected divs in selected's row and then inserted the ui-view div after the row.
Here what I have so far:
HTML:
<div id="container">
<a ng-repeat="item in professionals | filter:{cat: cat} | filter:query"
ui-sref="bids.item({item: item.link})"
ui-sref-active-eq="selected">
<div>
...
</div>
</a>
<div ui-view></div>
</div>
CSS makes div a flex element and wraps the square `a` divs contained.
Partial that opens when clicked includes:
<div class="expand" data-ng-if=" need something to the extent of open only below selected items row">
My html:
<div id="contentDiv">
<div id="headerDiv" ><div id="titleDiv"> Queries</div></div>
<div id="valuesDiv" ><div id="yearDiv"> 2015</div></div>
<div id="graphDiv" ><div id="chartDiv">graph</div></div>
</div>
Like this div, I have another div but the content in the div is different.
How to add a new div horizontally when I click on hyperlink using angularjs?
How can I do this? please help me out regarding this
Looks like what you need is a two way binding with the ng-model directive. So the idea would be that you bind the new div to a variable in your scope which is initially in an empty or undefined state (for example, there are better ways). When the hyperlink is clicked it calls the function specified by an ng-click directive which will fill your bound object, which in turn will cause the new div to be rendered.
EDIT:
Based on your comments here is a simple example.
HTML page:
<div id="newDiv" ng-repeat="item in items">
<!-- Div content -->
<!-- example -->
<input type="text" ng-model="item.name">
</div>
<input type="button" ng-click="addItem()">
Controller:
$scope.items=[];
$scope.addItem = function() {
var newItem = {};
newItem.name = "new item name";
$scope.items.push(newItem);
}
What's happening here is the data for each div is stored in an array of objects. The ng-repeat directive will repeat the div for each object in the array. You can then fill the elements in the div using the object. Adding a new div is as simple as adding a new item to the array and angular will take care of the rest for you. Please note that I have not tested this example, but hopefully it's enough to point you in the right direction.
RE aligning the divs horizontally, this will be done with CSS, using the inline-block display mode. So you could give the div a class of, for example, "horizontalDiv" and add the following class to your CSS file:
.horizontalDiv {
display: inline-block;
}
This is my first meteor app. It's primarily inspired from this blog post. I use ng-switch to display different messages like:
<ng-switch on="message.type">
<!-- Text Widget -->
<div ng-switch-when="text" class="text">
{{ message.text }}
</div>
<!-- Picture Widget -->
<div ng-switch-when="picture" class="picture">
<img ng-click="trackClick($event, message)" ng-src="{{message.picture}}">
</div>
<!-- Dynamic Widget -->
<div ng-switch-when="dynamic" class="dynamic">
<div class="content" ng-click="trackClick($event, message)">{{ message.content }}</div>
</div>
The way this app behaves is as follows:
User enters a text, a meteor collection is updated and the corresponding text widget shows up
A DDP client (in Ruby) listens for any add event in the collection. It updates the collection with a text or image or dynamic content.
The frontend creates a new DOM element and displays the content in that element.
However, I have a special content type called dynamic where I do not want to create a new DOM element (everytime), but rather edit the content of existing DOM element.
The way I think to achieve this is to edit the corresponding Mongo entry without adding a new one. But is there a way I could have this functionality when I have to add a new entry?
I have a problem getting the active slide in an Angular-UI Bootstrap carousel outside the carousel.
I have a panel, with the carousel inside, and want to put buttons in the footer of the panel that makes actions using the selected slide, but using jquery selectors is not an option.
I want to implement it using something in pure angular.
I think I can use the active attribute, but maybe there is something clever that can do the trick more smoothly.
Some code (Jade syntax):
.panel.panel-info
.panel-body
carousel.imgCarousel(interval='5000')
slide(ng-repeat='media in selCard.superviseTab.media')
img.img-responsive(preload-image ng-src='/api/cards/{{selCard.superviseTab.sID}}/media/{{$index}}')
.carousel-caption
multiSelect
h4 Slide {{$index+1}} of {{selCard.superviseTab.media.length}}
p {{media.originalFilename}}
.panel-footer
.navbar-collapse.collapse
ul.nav.navbar-nav.navbar-left
li
a.btn.btn-danger
i.fa.fa-unlink
If you look at the AngularUI documentation, you can see this is how the slides are integrated into the HTML:
<carousel interval="myInterval">
<slide ng-repeat="slide in slides" active="slide.active">
...
</slide>
</carousel>
We can see that the active slide is determined by the active property on each slide.
So, you should be able to iterate through the slides and return the first slide with the active property on it. As long as you haven't modified the slides array outside of this carousel, it should give you the index of the current slide.
For example, something like:
function isActive(slide) {
return slide.active;
};
$scope.getActiveSlide = function() {
var activeSlides = $scope.slides.filter(isActive)[0];
//return the first element, since the array should only return one item
};
Should do the job (or however you choose to implement your find functionality).