Angular

552

Solutions

368

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

We are using upload tab in CKEditor in my Angular/Ionic 3 project. Currently, we are getting server not found error, So is there any steps required to upload an image in the server?
0
Cloud Class® Course: SQL Server Core 2016
LVL 12
Cloud Class® Course: SQL Server Core 2016

This course will introduce you to SQL Server Core 2016, as well as teach you about SSMS, data tools, installation, server configuration, using Management Studio, and writing and executing queries.

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
How do I use switchMap here in my below code?

getObject(id: string) {
    console.log(id);
      return this.http
      .get<RootObject>('api/object')
      .pipe(catchError(this.handleError));
  }

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
So I am trying to implement routing on a search key up. I have my search component as follow

search.component.html
<form>
  <div class="form-group input--compressed">
    <div class="form-group__text text-muted">
      <input id="search" placeholder="Search Object" type="search" (keyup)="search($event.target.value)">
    </div>
  </div>
</form>

Open in new window


search.component.ts like this..
constructor(private router: Router) { }

  ngOnInit() {
  }

search(id: string) {
        this.router.navigate(['/object/' + id]);
}

Open in new window


my route is defined in app.module.ts
const appRoutes: Routes = [
  { path: 'object/:id', component: ObjectSummaryComponent },
  { path: '', component: DisplayErrorComponent }
];

Open in new window


If I just type a value in the search box, it doesn't route to my component. But after typing if I press enter ..it does.  I want to be able to route it on after typing ...or if value selected from list of ajax options for search box.  What am I missing here?
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
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
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.

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
Hi I have been trying to write test cases for my registration service. It has a url which it sends 4 values. the service is as follows:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http'



interface registerResponse {
  success: boolean,
  message: string
}

@Injectable()
export class AuthService {

private _regurl ="http://localhost:3000/api/register"
  constructor(private http: HttpClient) { }



  registerUser(username,email,date,  password) {
   
    return this.http.post<registerResponse>(this._regurl, {
      username,
      email,
      date,
      password
      
     
    })
  }

}

Open in new window


I am still learning how to write test cases, i m trying to get the registerResponse to work.

here is what i have written till now

import { TestBed, async, inject } from '@angular/core/testing';
import {
  HttpModule,
  Http,
  Response,
  ResponseOptions,
  XHRBackend
} from '@angular/http';
import { MockBackend } from '@angular/http/testing';
import { AuthService } from './auth.service';
import { HttpClient } from '@angular/common/http'


describe('RegisterService', () => {

  beforeEach(() => {

    TestBed.configureTestingModule({
      imports: [HttpModule],
      providers: [
        { provide: HttpClient, useValue: 'http://localhost:3000/api/register' },
        AuthService,
        { provide: XHRBackend, useClass: MockBackend },
      ]
    });
  });

Open in new window


I know its not much I hv only defined mockbackend but any help would be appriciated

Thank You
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,

My manager asked me updating a website from codeigniter to  
backend: API using PHP (Symfony) or node (expressjs) or Drupal 8 . or any other framework. can you give me explanations?

And for single page applications Angular 4 or Vue js
0
Get your problem seen by more experts
LVL 12
Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

I have two separate application built mainly using angularjs and  laravel.

1) Front office
2) Back office

The authentication method is Laravel passport.

The problem I am encountering is when I login to both front and back office. Then when I logout from either the front or back office app both application get logout.

This is happening when I'm using  the same browser with multiple tabs.

Are there implementable solutions to the mentioned problem.

Your help is kindly appreciate.
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
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
React vs Angular, which one is more popular among JavaScript developers? https://goo.gl/7ew4W4 #React #Angularjs #Webdevelopment #Framework #Javascript
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 have a custom confirmation popup (Yes/No) which i call through angular typescript file (TS)

parentpage.ts

export class ManageConfigs implements OnInit,AfterViewInit  {
  @ViewChild('warning') warning: any;

    var retVal = this
                   .warning
                   .showWarningWithConfirmation("Are you sure you want to delete this?");
}

Open in new window

Based on button selection (yes/no) popup will return value true or false. That means retVal will be true/false.

But the issue is popup is rendering after calling the line.

var retVal = this
               .warning
               .showWarningWithConfirmation(
                  "Are you sure you want to ",
                  "delete region " +regionName + "?"
               );

Open in new window

popup.ts

public showWarningWithConfirmation(messageLine1,messageLine2): boolean {
  this.visible = true; 
  this.messageLine1 = messageLine1;
   this.messageLine2 = messageLine2;
  setTimeout(() => this.visibleAnimate = true, 100);  
  return this.retWarningValue;
}

Open in new window

popup.html

  <div class="container-fluid" id="main-content" (click)="this.visibleAnimate = false;this.visible = false" [@hideShowAnimator]="hideShowAnimator">
      <div class="custom-modal modal fade" id="warningModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" [ngStyle]="{'display': visible ? 'block' : 'none', 'opacity': visibleAnimate ? 1 : 0}">
          <div class="modal-dialog modal-sm" role="document">
          

Open in new window

0

Angular

552

Solutions

368

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.