Sending the format of the display value to an Angular component

Question

Sending the format of the display value to an Angular component

Looking for a way to pass display value formatting to an Angular component.

Here are a couple of examples:

format="'(utc, offset) location (tz)'" === '(UTC -04:00) New York (EDT)'

or

format="'(tz, offset) location'" === '(EDT -04:00) New York'

The goal is to display the value in the specified format with parentheses included. One possible approach is creating an array with the required format? Given the following string, how can I generate the corresponding array:

'(utc, offset) location (tz)' === ['(', 'utc-code', 'offset-hours', ')', 'location', '(', 'tz-code', ')'];

'(tz, offset) location' === ['(', 'tz', 'offset', ')', 'location']

javascript angularjs regex string formatting

Answer 1

Answer №1

To pass the value, you can utilize component binding. The function $doCheck will be triggered in each digest cycle to identify and respond to changes in the bindings.

I've implemented a straightforward logic using regular expressions to showcase the data with a specified input format. This method might prove more effective compared to your array-based approach.

angular.module('app',[])
.controller('appCtrl', function($scope){
  $scope.format = '(offset) location (tz)';
})
.component('myComponent', {
  template: '<div>{{$ctrl.formattedValue}}</div>',
  controller: myComponentCtrl,
  bindings: {
    format: '='
  }
});

function myComponentCtrl(/*your DI goes here*/){
  console.log('log from component: format->'+this.format);
  var self = this;
  this.formattedValue = '';
  
  this.$doCheck = function(){ 
    var sampleDateObject = {
      tz: 'CDT',
      offset: '-4:00',
      location: 'Chicago',
      year: 2017
    }
    self.formattedValue = self.format.replace(/([a-z]+)/gi, function(match){
      return sampleDateObject[match]?sampleDateObject[match]:match;
    });
  };
}

myComponentCtrl.$inject = [/*your DI goes here as string*/];

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.11/angular.min.js"></script>
<div ng-app="app" ng-controller="appCtrl">
  <my-component format="format"></my-component>
  <my-component format="'(tz, offset) location, year'"></my-component>
</div>

Answer 2

To pass the value, you can utilize component binding. The function $doCheck will be triggered in each digest cycle to identify and respond to changes in the bindings.

I've implemented a straightforward logic using regular expressions to showcase the data with a specified input format. This method might prove more effective compared to your array-based approach.

angular.module('app',[])
.controller('appCtrl', function($scope){
  $scope.format = '(offset) location (tz)';
})
.component('myComponent', {
  template: '<div>{{$ctrl.formattedValue}}</div>',
  controller: myComponentCtrl,
  bindings: {
    format: '='
  }
});

function myComponentCtrl(/*your DI goes here*/){
  console.log('log from component: format->'+this.format);
  var self = this;
  this.formattedValue = '';
  
  this.$doCheck = function(){ 
    var sampleDateObject = {
      tz: 'CDT',
      offset: '-4:00',
      location: 'Chicago',
      year: 2017
    }
    self.formattedValue = self.format.replace(/([a-z]+)/gi, function(match){
      return sampleDateObject[match]?sampleDateObject[match]:match;
    });
  };
}

myComponentCtrl.$inject = [/*your DI goes here as string*/];

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.11/angular.min.js"></script>
<div ng-app="app" ng-controller="appCtrl">
  <my-component format="format"></my-component>
  <my-component format="'(tz, offset) location, year'"></my-component>
</div>

Sending the format of the display value to an Angular component

Answer №1

Similar questions

Guide to Re-rendering a component inside the +layout.svelte

Is it possible to incorporate a next.js image onto the background design?

Streamline AngularJS conditional statements within a loop

Using JavaScript functions to modify the style of the DOM

Steps to retrieve hexadecimal addresses sequentially

React - The select component has received an invalid value of `undefined` that is out of range

In relation to the Uncaught Error: Syntax error, an unrecognized expression has been encountered

Select component with nested checkboxes for multilevel dropdown

Using a timer to make Ajax calls twice on a single webpage

Which library does stackoverflow utilize to showcase errors (utilizing Bootstrap popover for error help-block)?

The some() method in Javascript with an extra argument

Accessing instance variables from a chained observable function in Angular 2/Typescript

A JavaScript or CSS file within an HTML document

Exploring the file attributes within nw.js

Steps to create an if statement using jQuery

Exploring the power of Angular by implementing nested ng-repeat functionalities:

Looking for a way to detect a click event on the header using AngularJS?

Examine each of the elements in the ng-repeat loop

Refreshing an HTML table using instance variables from a C# class (utilizing jQuery and AJAX)

Dynamic resizing navigation with JQUERY