I have seen this answer but it answers for jquery and not angular/typescript.
My question is similar to this question, but my question is seeking a solution for angular.
How can I remove wrapper (parent element) without removing the child in Angular using typescript or scss? (If it is possible by both kindly show both methods).
For example how to programatically manupulate the dom below from
<div class="wrapper">
<span>This is It!</span>
</div>
<div class="button">Remove wrapper</div>
to: (After clicking on the button I would like to have the dom iook like below)
<span>This is It!</span>
<div class="button">Remove wrapper</div>
EDIT:
Kindly also show how to set it so that it can add the wrapper div back when I click the button again. Basically toggling the wrapper div.
I think you can simulate using ng-template and two divs, some like
<div *ngIf="toogle" class="wrapper">
<ng-content *ngTemplateOutlet="template"></ng-content>
</div>
<ng-content *ngTemplateOutlet="!toogle?template:null"></ng-content>
<ng-template #template>
<hello name="{{ name }}"></hello>
</ng-template>
<button (click)="toogle=!toogle">toogle</button>
See a example in stackblitz
Related
I'm trying to dynamically change the style of an undeclared div. I'm using Angular and PrimeNG, and it's creating divs that I'm having trouble accessing through inline styles. The goal is to have a user input a width as a string (500px, 30rem, etc) and that width be text interpolated into those invisible divs.
Here is my HTML
<p-card>
<div class="wrapper">
<div class="percent basin-color-info">
<h2>{{ percentage }}%</h2>
</div>
<div class="info">
<h4>Percentage of time when outstanding risks are received</h4>
</div>
<div class="break"><hr /></div>
<div class="days">
<h5>{{ days }} Days</h5>
</div>
<div class="text"><h4>on average to correct outstanding risks</h4></div>
</div>
</p-card>
If I use inspector, it shows the following layout:
<p-card> (This is in the HTML)
<div class="p-card"> (This is **not** in the HTML)
<div> (This is **not** in the HTML)
<div> (This is **not** in the HTML)
<div class="wrapper"> (This is in the HTML)
...
</div>
</div>
</div>
</div>
</p-card>
I know that if I change the width of the first undeclared div with the p-card class in the inspector, the card changes how I'd like it to.
My hope is that I can use text interpolation {{ 500px }} or some sort of CSS injection to change the style of the undeclared divs, or some other workaround..
The p-card element from primeNG documentation says inline styles are an acceptable attribute but for some reason it doesn't change.
Hello Vincent Thomason,
From what I Understood, you are trying to style the div that is nested inside the p-card, that you don't have access to in your component HTML.
The only solution that I see is to give your p-card an id. Then use that id in querySelector and select the div inside ('myCardId>.p-card').
Here is a working stackblitz with what you want to accomplish:
https://stackblitz.com/edit/angular-ivy-nxjpwe?file=src/app/app.component.ts
I would like to use DragDropModule for my angular application so I can move panels that are stored inside templates (for practical purposes as well as for recursive plotting of child elements).
The problem that I have is that cdkDrag can't find the correct cdkDropList to drop into if cdkDrag is hidden within a template and is not directly nested under the HTML element. Example:
<div
cdkDropList
[cdkDropListData]="expanded.activities"
(cdkDropListDropped)="dropActivity($event)">
<div *ngFor="let activity of expanded.activities">
<ng-container [ngTemplateOutlet]="orangeProgramActivity"></ng-container>
</div>
</div>
<ng-template #orangeProgramActivity>
<div cdkDrag>This is just a test</div>
</ng-template>
With this code example, the orangeProgramActivity can be dragged anywhere but doesn't drop into the correct dropList as cdkDrag keyword can't find any droplist within its own template.
In the second example, everything works correctly and the item gets dropped into correct dropList:
<div
cdkDropList
[cdkDropListData]="expanded.activities"
(cdkDropListDropped)="dropActivity($event)">
<div *ngFor="let activity of expanded.activities">
<div cdkDrag>This is just a test</div>
</div>
</div>
I would like to achieve the same functionality as in the second example, but with the use of templates because I really need them for recursion. Unfortunately, I can't reveal the whole code as my employer wouldn't be happy with that.
All I need is some static reference for my cdkDrag that is inside a template, to point onto a correct element with dropList that is outside of the template.
These are the only solutions that I found on the internet and they don't seem to work for me:
Material 7 Drag and Drop ng-template incompatibility
CdkDragDrop and ngTemplateOutlet
This is my first question on Stack Overflow and I'm new to angular, so I'm sorry for any confusion in my post, and thanks for any help in advance!
This might not work for all use cases, but you could just write it like this:
<div
cdkDropList
[cdkDropListData]="expanded.activities"
(cdkDropListDropped)="dropActivity($event)">
<div *ngFor="let activity of expanded.activities" cdkDrag>
<ng-container [ngTemplateOutlet]="orangeProgramActivity"></ng-container>
</div>
</div>
<ng-template #orangeProgramActivity>
<div>This is just a test</div>
</ng-template>
I was lucky that I only need to reorder elements inside an array in which they are and I don't need to transfer them into other containers. So for my "root" activities, I used your simple solution to wrap it all in a draggable element.
<div cdkDropList [cdkDropListData]="expanded.activities" (cdkDropListDropped)="dropActivity($event)">
<!-- For every object in array make a container with template and an icon that will serve as a handle -->
<div *ngFor="let activity of expanded.activities">
<div cdkDrag>
<div cdkDragHandle>
<!-- Handle icon from FontAwesome -->
<i class="fas fa-grip-vertical"></i>
</div>
<!-- Container with a template that we need -->
<ng-container [ngTemplateOutlet]="orangeProgramActivity" [ngTemplateOutletContext]="{act: activity}"></ng-container>
</div>
<!-- Recursive template for children -->
<ng-container [ngTemplateOutlet]="childActivitiesRecursion" [ngTemplateOutletContext]="{act: activity}"></ng-container>
</div>
And for my recursion, I created a droplist inside a template that serves only for reordering these children activities.
(I had problems with pasting template so the ng-template tag is not terminated at the end of the code)
<ng-template let-act="act" #childActivitiesRecursion>
<!-- Droplist inside a template for reordering child activites -->
<div cdkDropList [cdkDropListData]="act.childActivities" (cdkDropListDropped)="dropActivity($event)">
<!-- Iterates through all child activities -->
<div *ngFor="let childActivity of act.childActivities">
<div cdkDrag>
<div cdkDragHandle>
<i class="fas fa-grip-vertical"></i>
</div>
<!-- Different template for child activities -->
<ng-container [ngTemplateOutlet]="blueProgramActivity" [ngTemplateOutletContext]="{act: childActivity}"></ng-container>
</div>
<!-- Recursion for even deeper child activites -->
<ng-container [ngTemplateOutlet]="childActivitiesRecursion" [ngTemplateOutletContext]="{act: childActivity}"></ng-container>
</div>
</div>
I will accept Richard's answer as a solution because if you are able to solve it like this, it's definitely the most elegant solution you can do. But there would be still an issue if you needed to transfer items into different containers after using templates for recursion!
here is my div code and my file type is .php
these are div elements that I want to hide.
i use different methods with id and class also with javascript but my issue is not resolved
<div class="qamar-container">
<div class="content-section">
<h1>AB & MIB Traders</h1>
</div>
<div class="button-section">
<button>AB</button>
<button>ABC</button>
</div>
</div>
</div>```
if need any other information please tell me.
here are the steps by which my issue is resolved.
CSS Styles
display:none;
}
javascript
jQuery('#qamar-ab').on('click', function(event) {
jQuery('#ab').toggle('show');
jQuery('#qamar').toggle('hide');
});
});
Is there a way to search DOM elements for a specific element ID in angular 4? I am trying to search for an ID of a div in my ngb-accordion inside the ng-template.
I am looking for that Id div id="3005"
<ng-template class="super" ngbPanelTitle>
<div class="row heads">
<div class="col-sm">
<div [class]="className" id="3005" #mydiv></div> <b>Just a description</b>
</div>
</div>
</ng-template>
you can access your div by using#ViewChild.
Please go through this.
You can find it using querySelector like so:
angular.element(document.querySelector('#3005'))[0]
happy coding :)
I have a drop-down like so:
<div class="dropdown">
<select>
<option ng-repeat="i in sc.cl" value="{{i.deptname"}}><a ng-href="#{{i.id}}">{{i.deptname}}</a></option>
</select>
</div>
Basically, the dropdown element's name is inside an array and there are divs inside the html having the id as i.id like this:
<div class="right-bar">
<section class="contact-block" ng-repeat="i in sc.cl" id="{{i.id}}">
<div class="description">{{i.deptname}}</div>
<div class="inner-block">
<div ng-repeat="j in i.cgs">
<img class="vertical-image" src="frame.png">
<img class="horizontal-image" src="mobileframe.png">
</div>
</div>
</section>
</div>
whenever I click the dropdown element, I want it to scroll to the particular section. But nothing happens when I do so. Why does this happen? And when I tried inspect element in chrome, it doesn't even show the tags in the ng-repeat dropdown.
You should use Angular's $anchorScroll.
Please, take a look at this similar question: How to handle anchor hash linking in AngularJS
Uhhm, my suggestion seems completely unrelated as I'm a dummy at AngularJS. But I have a solution to scrolling to a section using jQuery. You could simply give the section an ID and animate scrolling to that point on click by calculating the top offset and animating the scrolltop to that point...If you want me to show you the code, I'll gladly do so...:-) (Oh and I know this should be a comment because it doesn't directly answer the question, but my reputation's 13 so I can't comment)...