Angular

556

Solutions

372

Contributors

Angular is a JavaScript open-source web application framework used to develop single-page applications. It aims to simplify both the development and the testing of such applications by providing a framework for client-side model–view–controller (MVC) and model–view–view-model (MVVM) architectures, along with components commonly used in rich Internet applications. Angular is the front-end part of the MEAN stack, together with Node.js runtime, Express.js backend framework and MongoDB database.

Share tech news, updates, or what's on your mind.

Sign up to Post

This is intersting that I didn't know. The thing is per this https://api.jquery.com/visible-selector/  the element should be visible. I see it in the DOM

 1. I have a page and I changed the design to have tabs
2. Original code didn't have tabs. It's one long page.
3. It does this

	var visibleSchedules = $(document).find('#scheduleArea .schedule:visible');

	if (visibleSchedules.length > 0) {...

Open in new window


4. With tabs (my redesign, when I'm not the corresponding tab... ".schedule:visible" is not visible

This is how I have it now:

t1.png
5. I thought instead of "visible", I should drill down to the dropdown in the div and check the selected value from the dropdown. If at least one not set to "select"...then I can loop thru this div like the old code. So, not look for "visible" because user might be on another tab

t2.png
I tried these but I get black for the what's selected in the dropdown

var visibleSchedules = $(document).find('#scheduleArea .schedule:visible');

         //********* tried this
	//var visibleSchedules2 = $(document).find('#scheduleArea .schedule').find('#Schedules[0].Type:selected').val();

       //******** tried this
	//var t = $('#Schedules[0].Type:selected').text()

	if (visibleSchedules.length > 0) {

Open in new window

0
Cloud Class® Course: Python 3 Fundamentals
LVL 12
Cloud Class® Course: Python 3 Fundamentals

This course will teach participants about installing and configuring Python, syntax, importing, statements, types, strings, booleans, files, lists, tuples, comprehensions, functions, and classes.

I'm rewriting and improving some jQuery code that I have inherited from a developer who's not here anymore.

I got help from Leakim and Julian here and I'm using the same method (using Template) Previous question - long thread

1. I uploaded my sample code here https://drive.google.com/file/d/1d2Gn8UDfeHfXvn560b114i-5Ob2ZP8rJ/view

Just download, unzip and click on "page.html". The corresponding JS file is "Reporting.js"

2. When page loads, you'll see one row of dropdowns. Click "Add" and now you'll see two

e1.png
3. In the first row, select something from the first dropdown. The second dropdown in the first row is enabled. This is correct.
But, the second dropdown in the second row also is enabled. This is not correct. Why is this happening?

e2.png
4. There's some existing code that the ex-developer has in this section of
$(document).on('change', '#reportBuilder select.filterField', function () {...

Open in new window

of Reporting.JS.  I think something might be off in that section now that I'm using Template and divs. I'll debug that. I wonder if I need to have an ID on these dropdown? somehow say... if user selects something on this row...only make this row enable/disabled. All that code in the 'change' event is even needed? can it be simpilfied


EDIT I fixed it by changing the below code because I don't have "tr" and "table" anymore. Can that "change" function be simpilfied?
var operatorSelect = $('select.fieldOperator', $(this).parentsUntil('tr').next());

Open in new window


to this

var operatorSelect = $('select.fieldOperator', $(this).closest('div').next());

Open in new window

0
In Angular, Can I Create a Dynamic Table using Static and Dynamic Column header?


 
From the above example- Name and department are static content(hardcode values), 01.01.2015 , 01.02.2016, 01.03.2016 are dynamic content to be iterated using ngfor.
 
please provide solution in Angular 5
0
You can see my example here. Download and click on page.html.  https://drive.google.com/file/d/1Kt2CQwvTAdY0uojPf8sf7krVu6sEz61f/view

1. When page loads, I have one row with "And" and the "X" delete.
2. I can click on Add and keep adding divs

What I want to do is:
1. The first row, remove the X
2. When on the last row ( I can have as many rows as I want)...remove And

f1.png
I thought about finding the # of divs that has X and AND. If only 1, hide "X". But that's not going to work.

I think I need to drill down these divs but still not sure how to hide X and AND

f2.png
0
I know there has to be a way to do this. I figured out how to get the innerText of one row.

1.  I click on a button and dynamically create some controls with a div. Each div has a number
j1.png
2.  I click on X delete next to each row and remove a row. Now, the row numbers are out of order
j2.png
3. When I click on X, I call this and I get the innerText of the row I'm deleting
$("#schedgroup").on("click", ".remDelSched", function (e) { //change13 change body to schedgroup

		console.log($(this).closest('.row').children('.toggle')[0].innerText); //*** gets me the innerText of the row I'm deleting

		var numItems = $('div.schedule').length;

		if (numItems > 1) {
			$(this).closest('.row').remove();
			
		}
		else

			$(this).closest('.row').addClass('hidden'); //orig code has one "schedule" as hidden. Don't remove all of them if user clicks on X. Leave one as hidden

		

	
	});

Open in new window


4. Now, I want to renumber the divs

I think I need to do this when I click on an X but how in jQuery?
1. This gives me the "row" I'm deleting $(this).closest('.row')
2. I need to get its parent div which is schedgroup
3. Then get all the "row --> toggle" children of schedgroup
4. Loop thru and rename/increment. I started with zero but can start with 1

j3.png
0
I'm on a roll with my jQuery questions :) I'm close to telling my manager to just forget about this section but can't give up.

It's related to this question https://www.experts-exchange.com/questions/29107740/jQuery-code-partly-works-hide-div.html

1. I click on the X to remove a row. The row is removed. But now, I want to remove the "toggle" div as well.
j1.png
2. This is the code that removes the "schedule" div. I tried some lines (commented them out below) but still can't get it right.

$("#schedgroup").on("click", ".remDelSched", function (event) { //change13 change body to schedgroup

		console.log($(this));
		console.log($(this).parents());
		//console.log($(this).closest(".toggle"));

		//$(this).parents().children('div.rows').children('.toggle').addClass('hidden'); //try this to remove the toggle div

		var numItems = $('div.schedule').length;

		if (numItems > 1)
			$(this).closest(".schedule").remove();
		else

			$(this).closest(".schedule").addClass('hidden'); //orig code has one "schedule" as hidden. Don't remove all of them if user clicks on X. Leave one as hidden
		
		//$(this).parents().children('.schedgroup').toggleClass("hidden");  //try this to see if div toggle is removed

		//$(this).closest(".schedule").next(".toggle").addClass('hidden');//try this to see if div toggle removed
	});

Open in new window


3.  To debug/step thru it,
 This gets me the element I'm clicking on

console.log($(this));

Open in new window


Then I looked at the parents
console.log($(this).parents());

Open in new window


j2.png
I tried "next", "closet", "prev". How can I traverse this and find the "toggle" for that specific row?

EDIT - just tried this as well
$(this).closest(".schedule").closest('.toggle').addClass('hidden');

Open in new window

0
This is related to this question https://www.experts-exchange.com/questions/29108573/jQuery-click-event-doesn't-get-called.html

I'll go step by step.

1. The solution in that thread worked. I tested it by hardcoding some rows and it worked. Then, I plugged it in my actual code and that worked except that I needed to fix the position of the rows.

I had this code to add the row dynamically

 
var schedule = $('.schedule:last', '#scheduleArea'); 
            var newSchedule = $(schedule).clone(true, false).html();

            // Change the 'Id' of all the elements
          //... some code here

            // Append the new schedule and hide it
	$(schedule).after('<div class="row"> <div class="toggle"> <div class="col-xs-4" style="background-color:rebeccapurple">left</div> </div><div id=Schedules[' + scheduleCurrentIndex + '].Type class="schedule hidden">' + newSchedule + '</div></div>'); 
 

Open in new window


The divs looked like this
d1.png
2. I made a change to the HTML to get the rows correctly. Instead of ".after", I used ".append"

	var schedule = $('.schedule:last', '#scheduleArea'); 
            var newSchedule = $(schedule).clone(true, false).html();

            // Change the 'Id' of all the elements
      //... some code here

			//console.log($(schedule));

            // Append the new schedule and hide it
			//$(schedule).after('<div class="row"> <div class="toggle"> <div class="col-xs-4" style="background-color:rebeccapurple">left</div> </div><div id=Schedules[' + scheduleCurrentIndex + '].Type class="schedule hidden">' + newSchedule + '</div></div>'); //camilla added collapse in per stackoverflow
		    
			
$("#schedgroup").append('<div class="row"> <div class="toggle"> <div class="col-xs-4" style="background-color:rebeccapurple">left</div> </div><div id=Schedules[' + scheduleCurrentIndex + '].Type class="schedule hidden">' + newSchedule + '</div></div>')

Open in new window


Now it looked correctly
d2.png
3. I had the code in the accepted solution above but the divs weren't hiding/displaying
$('.row').on("click", ".toggle", function() {
console.log($(this).parents().children('.schedule'));
    $(this).parents().children('.frequency').toggleClass("hide");
	});

Open in new window


I saw this in console when I was clicking on the div. "click" event looked like being called twice

d3.png
4. I went to Julian's solution and that worked. Why is that? Julian has an explanation here but maybe that's what I don't understand
Julian's explanation

I think this is the key
To get around this we need to bind to a parent element that will be static -


If use #schedgroup instead of 'body'...code below works because #schedgroup is static
$('body').on("click", ".toggle", function() {

Open in new window


You can see it here

Works http://jsfiddle.net/jv2oudhg/

Doesn't work with my HTML change http://jsfiddle.net/gm5uxh7q/
0
I am following an example http://jsfiddle.net/glebkema/73gtkvjt/  to have have divs collapse and expand.

But I create controls dynamically so the JS code in that JSFiddle wasn't working... the divs weren't being collapsed.

I found this link that explained why dynamic controls work differently Explanation

I created this JSfiddle (forked the one above)

http://jsfiddle.net/3zw18rxe/7/

What I tried:
      
$('.toggle').on("click", ".schedule", function() {

Open in new window


Tried this but the divs won't collapse correctly...all of them will collapse

$(document).on("click",".toggle",function(){
    // code goes here
});

Open in new window


As a test, I hardcoded the id, but this didn't work either

$('.toggle').on("click", "#Schedules[0].Type", function() {

Open in new window


How can I do this when the controls are created dynamically?
0
1. I'm following this example http://jsfiddle.net/glebkema/73gtkvjt/
that I got from here. I'm doing the jquery version Example

2. You can download my sample code here. Unzip and just click on "page.html" to see it. The js file is Reporting.js
https://drive.google.com/open?id=17IuFhPlYPX5B7EATvE9sDES-EoB3i7gA

This is what's happening

1. I click on "Add Report Delivery" button and I see the control displayed. I click on the purple div and I can hide and display the control. This works.
j1.png
2. Click on "Add Report Delivery" again and you'll see the second control. Now, click on the puruple div and that div (control) doesn't collapse. I put debug steps in the JS code and for the second puruple div...the js code is not even called. Only the first div collapses and expands. I see I have unique Ids . Not sure what I'm missing.

j2.png

EDIT I ran a test. When I click on "add delivery schedule", the control is built dynamically. Something with this dynamic control that the "click" control on "toggle" doesn't work. Don't know why.
0
I am working on a MVC project with AngularJs  and trying to download SSRS report as an excel. Am new to AngularJs.
I have tried the following codes and output is download excel with binary code!

Please correct my code, so that will download excel in exact same format as in SSRS report.

report-list.ctrl.js
(function () {
    'use strict';
    var module = angular.module('app')

        //.directive('ngConfirmClick', [
        //    function () {
        //        return {
        //            link: function (scope, element, attr) {
        //                var msg = attr.ngConfirmClick || "Are you sure?";
        //                var clickAction = attr.confirmedClick;
        //                element.bind('click', function (event) {
        //                    if (window.confirm(msg)) {
        //                        scope.$eval(clickAction)
        //                    }
        //                });
        //            }
        //        };
        //    }])

        .controller('ReportListController', ['$scope', '$http', '$q', '$interval', '$location', '$window', '$modal', '$modalStack', 'toastr', 'dataService',
            function ($scope, $http, $q, $interval, $location, $window, $modal, $modalStack, toastr, dataService) {

                $scope.showreportlist = true;
                $scope.reports = [];
                $scope.clientsessionreportData = [];


                $scope.downloadReport = function (res) {

                    

Open in new window

1
Keep up with what's happening at Experts Exchange!
LVL 12
Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

I am trying to get an id from URL and use that to make http call.

This is how I  am trying to get id in my main component parent.component.ts:
 ngOnInit() {
      this.route.paramMap.forEach(param => {
      console.log(param.get('id'));
    });

Open in new window


The problem is when I see console I see two values: first null and then test

parent.component.ts:39 null
21:29:54.006 core.js:3255 Angular is running in the development mode. Call enableProdMode() to enable the production mode.
21:29:54.024 parent.component.ts:39 test
21:29:55.105 zone.js:2969 XHR finished loading: GET "http://localhost:4200/sockjs-node/info?t=1531186195094".

my app url looks like this :

http://localhost:4200/object/test

Open in new window


my app routes look like this:

const appRoutes: Routes = [
  { path: 'object/:id', component: ParentComponent },
  { path: '',
    redirectTo: 'ParentComponent',
    pathMatch: 'full'
  }
];

Open in new window


I don't understand, why I get 'null' first.  After getting id, I want to pass it to the service which subscribes to an http call. But because of first null value, I am facing issues. Please help.
0
This code partly works but I think I need to do something with the "click" event. I'm building this dynamically.

You can download and unzip it from here. Just click on page.html to see it.
https://drive.google.com/file/d/1dU8yOCmzQJUeruaeKu1qxJLPs1-HlHF_/view

1. I click on "Add Report Delivery"
2. It calls $('#showSchedule').click(function () { in Reporting.js and adds a "schedule"
r1.png
3. Now, I click on "Add Report Delivery" again and another "schedule" is added. The first one I added is now hidden. You can add more.

r2.png
This is NOT the functiolity I'm looking for. I don't want the first one or additional ones to be hidden. I want to wrap each in a div... to be minimized...like collapse... with header.."schedule1", "schedule2", "schedule3", etc.

So, with each click...have the previous "schedule" div collapsed with a header title. I don't want them hidden. The toggle and "click" event are not working together correctly looks like it.

How can I do this? When I click on the button, each section gets an ID. Maybe I need to find the parent "div" which is "schedule" and attach the ID to the parent DIV for what I clicked on and collapse it? Here is a screenshot
r3.png
0
I'm confusing myself by going back and forth and reading about DataTable and jqGrid.

This is my dilemma:
1. Working on a project that has lots of grids. Grid.MVC is used for the grids
2. There's one section that uses jqGrid. Probably it's because "grouping (group by)" is needed (our  ex-developer coded this).
3. I bought this template  https://keenthemes.com/preview/metronic/theme/admin_1/table_datatables_managed.html and it uses DataTable (not that I can't replace it)

This is what I need
1. "Group by" for at least one section of our site
2.  Inline edit - one of our existing grids has that
3. Performance - some grids have large amount of data to display.
4. Export to Excel and CSV but I can use EPPlus to export the data
5. Sorting
6. Nice to haves : user be able to hide/display columns
7.  jqGrid needs a license but DataTable is free. Ex-developer has coded the jqGrid but looks like he didn't ask our manager to get the license.

From what I read, jqGrid has better performance. I don't know if DataTable has "group by".

What to do? Anyone has used either? My preference is to use DataTable because it doesn't require a license but again...I don't know if it supports "group by". I looked at their site and not clear if they have it or not.

I've found these links with pros and cons:

https://www.slant.co/versus/4837/4840/~jqgrid_vs_datatables

http://debapk.blogspot.com/2012/01/jqgrid-and-datatable-comparision.html
0
I have this partly working but not completely

1. I create dynamic controls by clicking on a button. This is an example of having 2 rows
f1.png
2. I have an X next to each row and when user clicks on it, I want to hide the div

f2.png
3.  I have this jQuery code. It works only if I have one row and hides the div. But when I have more than one, it doesn't do anything.


How can I have.... hide the div that corresponds to this X being clicked?

$(".remDelSched").on("click", function (event) {
		console.log($(this))
		$(this).closest(".schedule").addClass('hidden');
		//event.preventDefault();
	});

Open in new window


This is the code for X delete. I wonder if I need to have a unique id for each X (delete)
	<div class="col-md-2">
									<a href="javascript:void(0);" class="remDelSched"><span style="color: red" class="glyphicon glyphicon-remove"></span></a>
								</div>

Open in new window

0
I found this JSFiddle that I want to use

http://jsfiddle.net/hQnWG/

The error sometimes happens and sometimes it doesn't.

1. select more than one item
j1.png
2. Drag and drop them in the other . The items disappear with the error. Again, this sometimes happens and sometimes doesn't

j2.png
0
This can't be hard but I've been at this for 4 hours now and tried different code and Googled and still can't get it...
You can get the code from here. Download, unzip and just click on "page.html"
https://drive.google.com/open?id=1lcRj5FckJ7UF2_XxF1S1VD3jTQGKUUMC

1. You see there's an "Add filter" button.
2. Click on it and a row is added.
3. The last row doesn't have an X. I want to add an X but not "AND"

1.png
What I've tried:

1. Tried "mouseup" event thinking after user clicks the button, I can get the last row and add the X but that didn't work
$("#addNewFilterRow").mouseup(function () {
		console.log("mouse up")
		var len = $('.filterArea tr').length;
		var last_row = $('.filterArea tr').eq(len - 1);
		last_row.find('td:nth-child(6)').append(' ' + '<a href="javascript:void(0);" class="remCF"><span  style="color: red" class="glyphicon glyphicon-remove"></span></a>');
		console.log(last_row)
	});

Open in new window


2. Then thought when user clicks on the button, I can get the last row and add the X but this didn't work either
in this event $('#addNewFilterRow').click(function () {

	var len = $('.filterArea tr').length;
		console.log(len)
		//var first_row = $('#jTable tr').eq(0);
		//console.log(first_row)
		var last_row = $('.filterArea tr').eq(len - 1);
		//console.log(last_row)
		//last_row.find('td:nth-child(6)').append(' ' + '<a href="javascript:void(0);" class="remCF"><span  style="color: red" class="glyphicon glyphicon-remove"></span></a>');
		//$('#last_row td:nth-child(6)', '#reportBuilder').append(' ' + '<a href="javascript:void(0);" class="remCF"><span  style="color: red" class="glyphicon glyphicon-remove"></span></a>');

Open in new window

0
Hi,

I have an excel file which would contains around 20-30 millions records every time user uploads the same,frequency of upload would be 4-5 times on daily basis (by different users).
Application which is built on java, spring 3 and SQL server as back end.

Just need to know how to process/read the file ( reading the excel file cell by cell and storing in database) in an efficient manner which would not allow user to wait much.
0
Will submitting a login form with a POST request over HTTPS be enough security or are there other precautions I should take? This project is also being built in Angular if there are any specific considerations.
0
Hi Experts,

   I am trying to loop through json object and filter it into different arrays based on 'group'. Also, trying to assign particular field to a const....I couldn't go beyond

 
 from(Field).pipe(groupBy(fie => fie.group), mergeMap(group => group.pipe(toArray())));

Open in new window


   I would like have this.group1, this.group2, this.gropu3 to have respective Fields after this execution along with this.fieldName1, this.fieldName2 having their respective field values.

  Field object looks like this

 
 Field : [
{ name : fieldname,
  value: FieldValue,
  group: FieldGroup
  }
]

Open in new window

0
Cloud Class® Course: Microsoft Windows 7 Basic
LVL 12
Cloud Class® Course: Microsoft Windows 7 Basic

This introductory course to Windows 7 environment will teach you about working with the Windows operating system. You will learn about basic functions including start menu; the desktop; managing files, folders, and libraries.

Hi,

Need to upload multiple files showing the progress bar for each file respectively.Is there any api for plugin for the same.

Angular 1.2 and HTML 5 are being used to design the page.
0
I have a table (screenshot below)

I click on "Add filter" and add a row using this

	$('.filterArea tr:last td:last', '#reportBuilder').text(' ' + text_And); //orig
		//$('.filterArea tr:last td:first', '#reportBuilder').text(' ' + text_And); 
		$('.filterArea tr:last td[name=removeX]', '#reportBuilder').append(' ' + '<span id="addNewFilterRowRemove" style="color: red" class="glyphicon glyphicon-remove"></span>');

Open in new window


But I want to remove the X in the first row. Tried this and a couple of other lines of code but can't get it right. How can I do this?

$('.filterArea tr:first td[name=removeX]', '#reportBuilder').remove(' ' + '<span id="addNewFilterRowRemove" style="color: red" class="glyphicon glyphicon-remove"></span>');

Open in new window


1.png
0
(I think Julian Hansen on EE said not to mix jQuery and Angular) but I have to ask again :) ....

I'm working on an MVC/C#/jQuery project. Lots of Razor code with JavaScript in one section and I want to see if I can simply it using AngualrJS and making the code easier to maintain.

I'm looking into AngularJS because I'm familiar with it more. The current code was developed by a developer who's not at the company anymore. It has hardcoded sections, SQL is being built in the code. Hard to maintain.

1. The page I'm looking for recode is a dynamic Reports page.
2. This page has lots of Razor/C# code to build the controls dynamically. It builds dropdowns dynamically. Builds another section dynamically
3. SQL statement is built in C#. Stored proc is not used
4. I see a JS file to build the controls along with the C# code

This dynamic report page is going to be a major part of our site. I want to simplify the code... use stored proc, somehow streamline the dynamic creation of the controls ...maybe use less C#/Razor code.

So, should I introduce AngualrJS into my solution that now is C#/jQuery?

This is how the page looks like now. The sections that I've marked are the dynamic parts of the page.

1.png
0
Hi All,

We are developing a application primarily using web api, entity framework, angular js, sql server and C# and hosted on dedicated server running single web site on IIS
Once we have done the data migration (loaded about 150K records)  we have noticed application performance was deistically reduced.
Eg. Service call takes about 15 -20 second (GET) and post is about 20 – 30 seconds.
To overcome this issue I thought of converting some of the codes into stored procedures.

Apart from doing so what we can do in IIS to gain performance boost.
0
You can download the code from here. Just click on page.html and you'll see the example I've setup.

Code is here https://drive.google.com/open?id=1tCSk98rvfPQ-bmTViZuXxmYb0Mby678s

1. In the right hand side list, I want to be able to move the items up and down. Items can move all the way to the last item in the list. This works
1.png
2. I want to move "Asset Tax" all the way to the top and it won't move.
3. I want to move "Billing address 2" to be the second in the list but when I move it, it goes to the last place.

4. You can double click on the items from the left list and add more to the right list and try this with more items.

Moving an item to the last place works but moving up and down is flaky. Doesn't work correctly.

What am I missing?
0
I am facing issue that I don't understand with Angular inheritance.

I have a component like

app.parent.ts
@Component({
  selector: 'app-parent-component',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.scss']
})

export class ParentComponent implements OnInit {
    public found: String;
}

constructor(
    private parentService: ParentService,
    private titleService: Title
  ) {
console.log(this.found);
}

ngOnInit() {
    // lets  make a call and initialized the root object and children
    this.parentService.getParent().subscribe(root => {
      this.parentRoot = root;
      this.parentRoot.PARENT.parent.Field.forEach(fi => {
        this.found = fi.found;
      });
    });
    console.log(this.found);
  }

Open in new window


then I have child component
child.component.ts
export class ChildComponent extends ParentComponent implements OnInit {
    
}

constructor(
    private parentService: ParentService,
    private titleService: Title
  ) {
super(parentService, titleService);
console.log(this.found);
}

Open in new window


I see the order of execution is parent component constructor -> parent ngOnInit -> childConstructor-> parent constructor->child ngOnInit.
looking at the console output, I don't the "found" value anywhere, it gives me undefined. I am expecting the found value to be seen in child component's console call.

But when I pass "found" via template like [found] ='found' to child.component.html from parent.component.html I see the found value.
What am I missing?
0

Angular

556

Solutions

372

Contributors

Angular is a JavaScript open-source web application framework used to develop single-page applications. It aims to simplify both the development and the testing of such applications by providing a framework for client-side model–view–controller (MVC) and model–view–view-model (MVVM) architectures, along with components commonly used in rich Internet applications. Angular is the front-end part of the MEAN stack, together with Node.js runtime, Express.js backend framework and MongoDB database.