Asked  6 Months ago    Answers:  5   Viewed   30 times

Is there anyway to send data as parameter with router.navigate? I mean, something like this example, as you can see the route has a data parameter, but doing this it's not working:

this.router.navigate(["heroes"], {some-data: "othrData"})

because some-data is not a valid parameter. How can I do that? I don't want to send the parameter with queryParams.

 Answers

11

There is a lot of confusion on this topic because there are so many different ways to do it.

Here are the appropriate types used in the following screen shots:

private route: ActivatedRoute
private router: Router

1) Required Routing Parameters:

enter image description here

2) Route Optional Parameters:

enter image description here

3) Route Query Parameters:

enter image description here

4) You can use a service to pass data from one component to another without using route parameters at all.

For an example see: https://blogs.msmvps.com/deborahk/build-a-simple-angular-service-to-share-data/

I have a plunker of this here: https://plnkr.co/edit/KT4JLmpcwGBM2xdZQeI9?p=preview

Tuesday, June 1, 2021
 
LaKaede
answered 6 Months ago
85

Don't serialize FormData with POSTing to server. Do this:

this.uploadFileToUrl = function(file, title, text, uploadUrl){
    var payload = new FormData();

    payload.append("title", title);
    payload.append('text', text);
    payload.append('file', file);

    return $http({
        url: uploadUrl,
        method: 'POST',
        data: payload,
        //assign content-type as undefined, the browser
        //will assign the correct boundary for us
        headers: { 'Content-Type': undefined},
        //prevents serializing payload.  don't do it.
        transformRequest: angular.identity
    });
}

Then use it:

MyService.uploadFileToUrl(file, title, text, uploadUrl).then(successCallback).catch(errorCallback);
Thursday, June 10, 2021
 
Bono
answered 6 Months ago
59

i have resolved this issue by upgrading mt angular-cli locally in the devDependenices (package.json) from 1.2.0 to 1.6.7

Monday, August 2, 2021
 
Hilmi
answered 4 Months ago
34

Have you tried removing the slashes in your Router link like so:

[routerLink]=['Questionaire', item.questionnaireType, item.id, 'UpdateQuestionnaire']?

There seems to be a problem with slashes in routerlink as described in this post

I would post this as a comment, but since I don't have enough reputation I will post this as an answer, sorry about that.

I hope this clears stuff up for you.

Kind regards Chris

Monday, August 30, 2021
 
PHLAK
answered 3 Months ago
37

UPDATED: As per new information (using angular-datatable)

The solution now boils down to computing the columns and options per accordion-group.

Working Plunker with 2 accordion groups

As you can see in the HTML below the options and columns are computed per accordion.

<table datatable class="table manage-user-table offer-mgt-table"  dt-options="getDtOptions(AllProduct)" dt-columns="getDtColumns(AllProduct)"></table>

Angular code showing getDtColumns and getDtOptions. I have kept the data very simple for demonstration purposes and copied the current dtColumns code however you can customize it so that you can even have more than 1 type of table :

var app = angular.module('myApp', ['ui.bootstrap', 'datatables']);
app.controller('myCtrl', function($scope, DTColumnBuilder, DTOptionsBuilder, DTColumnDefBuilder, $timeout, AllProducts) {
  $scope.AllProducts = AllProducts


  $scope.getDtColumns = function(allProduct) {
    var items = allProduct.ProductList;
    if (allProduct.dtColumns) allProduct.dtColumns.length = 0;
    allProduct.dtColumns =  allProduct.dtColumns || [];
    var dtColumns = allProduct.dtColumns;
    dtColumns.push(DTColumnBuilder.newColumn('').withTitle('').notSortable()
      .renderWith(function(data, type, full, meta) {
        return '<input type="checkbox" ng-model="showCase.selected[' + full.id + ']"/>';
      }));


    for (var key in items[0]) {
      if (key == "ProductName" || key == "LongDistanceMinutes" || key == "IsCallWaiting") {
        dtColumns.push(
          DTColumnBuilder.newColumn(key).withTitle(key).notSortable()
        )
      }
    }

    return dtColumns;
  };

  $scope.getDtOptions = function(allProduct) {
    if (allProduct.options) return allProduct.options;
    var items = allProduct.ProductList;
    allProduct.options = allProduct.options || DTOptionsBuilder.newOptions().withOption('aaData', items);
    return allProduct.options;     
  };


});

OLDER ANSWER without angular-datatable

First of all I do not recommend jQuery DataTable or any other jQuery component in AngularJS applications. I personally try not to bundle jQuery or perform DOM manipulation using jQuery.

However to get you going with what you have I suggest the following:-

Remove these two lines because simply adding those attributes datatable dynamically is not going to trigger the DataTable binding:-

angular.element('#dtVoice').attr('datatable', '')
        }
       $compile(angular.element('#dtVoice'))($scope);

and try using something like this:-

$('#dtVoice').DataTable( {columnDefs: $scope.dtColumns });

Further more just to clean up a bit I create a new directive (just typing out loud):

app.directive('myDatatable`, function(){
return {
   restrict: 'A',
   scope: {
       'dtColumns': '='
   }
   link: function($scope, elem, attr) {
        $('#dtVoice').DataTable( {columnDefs: $scope.dtColumns});    
   } 
};
});

and your table something like below:

<table id="dtVoice" 
    class="table manage-user-table offer-mgt-table" 
      dt-options="dtOptions" 
      dt-columns="dtColumns" my-datatable></table>
Wednesday, October 20, 2021
 
Muhammad Rehan Saeed
answered 1 Month ago
Only authorized users can answer the question. Please sign in first, or register a free account.
Not the answer you're looking for? Browse other questions tagged :  
Share