How  can I  resolve  this Error?I am a newbie in Graphql..I am trying  to call  graphql  API in angular.Below is my  code

export type DataTagsNames = {
	DATA_TAG_NM:String;
	DATA_TAG_ID:String;
	DSPLY_LINE_CNT:String;
	FLD_ENBL_IND:String;
	CNTXT_SCRN_IND:String;
	SHOW_DATA_IND:String;
	INJ_IND:String;
	RLT_ENTY_NM:String;
	CNTXT_SCRN_GRP_NM:String;
	PRTPT_TYPE_CD:String;
	DATA_TAG_PRTPT_CD:String;
	DATA_TAG_PRFM_R_CD:String;
	READ_ONLY_IND:String;
	EMTY_DLTE_IND:String;
	STWRD_EDT_IND:String;
}

export type Query = {
	allDataTagsNames: DataTagsNames[];
}

Select all Open in new window

export class ListComponent implements OnInit {
  datatagsdetails: Observable<DataTagsNames[]>;
  constructor(private apollo: Apollo) { }

  ngOnInit() {
    this.datatagsdetails = this.apollo.watchQuery<Query>({
      query: gql`
        query allDataTagsNames {
          DataTagsNames {
           
          DATA_TAG_NM
           DATA_TAG_ID
           DSPLY_LINE_CNT
           FLD_ENBL_IND
           CNTXT_SCRN_IND
           SHOW_DATA_IND
           INJ_IND
           RLT_ENTY_NM
           CNTXT_SCRN_GRP_NM
           PRTPT_TYPE_CD
           DATA_TAG_PRTPT_CD
           DATA_TAG_PRFM_R_CD
           READ_ONLY_IND
           EMTY_DLTE_IND
           STWRD_EDT_IND

          }
        }
      `
    })
      .valueChanges
      .pipe(
        map(result => result.data.allDataTagsNames)
      );

Select all Open in new window

Hallo, I would understand very well the Angular @HostBinding concept. Unfortunately, my book is very good but this concept is not very clear explained.

See please the code:

    @Component({
      selector: 'app-test-component',
      templateUrl: './test-component.component.html',
      styleUrls: ['./test-component.component.css']
    })
    export class TestComponentComponent implements OnInit {
    
      @Input() dataModel:AppModel;
      @HostBinding('attr.class') cssClass = 'alfa';
    
      constructor() { 
    
    (...)

Select all Open in new window

My personal explanation: "host binding allow to set something in the host element (in this case the app-test-component tag) from within the component it self (in other words, from this file I mentioned below); in this case, I set the class attribute of this tag to the variable named cssClass and with attribute 'alfa'". Is it correct?

In this case, if I defined the 'alfa' style in the corrispondent css file, why I don't see this style (i.e. background color or something else) in the page which shows my component?

Thank you very much!

Hi i just purchased Winzip 22 yesterday


I'm trying to run a gzip application from the command line via http-server


eg.  http-server gzip
to gzip the Angular bundles down to a much smaller size


Any ideas how I can do this?


Gordon Cumming

I am using angularjs 1. When I invoke the "updateProfile" below, it would display a modal dialog:

$scope.updateProfile = function(){
      modalService.showModal({}, modalOptions).then(function (result) {
        //my code
      });
}

Select all Open in new window

angular.module('myApp')
		.service('modalService', ['$uibModal',
    function ($uibModal) {

        var modalDefaults = {
            backdrop: true,
            keyboard: true,
            modalFade: true,
            templateUrl:'../assets/templates/main/modal.php'
        };

        var modalOptions = {
            closeButtonText: 'Close',
            actionButtonText: 'OK',
            headerText: 'Proceed?',
            bodyText: 'Perform this action?'
        };
		
        this.showModal = function (customModalDefaults, customModalOptions) {
            if (!customModalDefaults) customModalDefaults = {};
            customModalDefaults.backdrop = 'static';
            return this.show(customModalDefaults, customModalOptions);
        };
		
        this.show = function (customModalDefaults, customModalOptions) {
            //Create temp objects to work with since we're in a singleton service
            var tempModalDefaults = {};
            var tempModalOptions = {};

            //Map angular-ui modal custom defaults to modal defaults defined in service
            angular.extend(tempModalDefaults, modalDefaults, customModalDefaults);

            //Map modal.html $scope custom properties to defaults defined 

Select all Open in new window

…

I am working with a Mobile app using XAML and WebView.  It is also using Angular.

In Angular, I know that this syntax is like a "placeholder" for actual data you want to put on the form:

{{task.PartActualEndDate}}

But what I need help determining is what formatting is being applied to this date value?  The CSS class "dataColSig" is just setting the width to 23%.

 <tr><td class="labelColSig">Date:</td><td class="dataColSig">{{task.PartActualEndDate}}</td><td class="labelColSig">Date:</td><td class="dataColSig">{{task.ActualEndDate}}</td><td class="labelColSig">Date:</td><td class="dataColSig">{{task.ApprovedDate}}</td></tr>

Select all Open in new window

There is a lot of .js code to wade through.  How can I quickly find where the date format is being applied by Angular?

Debugging this at runtime is tricky, since this is a XAML app using WebView to display the HTML page.  I can't simply right-click and "Inspect element" on the HTML page at runtime.

I can set breakpoints in the JavaScript and then turn on Script as the debug type in Visual Studio ... so I do have that.  It's just that none of the breakpoints seem to be getting hit where task.PartActualEndDate is referenced in the .js code (that I  can tell).

Screenshot of the date values at runtime:

Hi experts. I'm integrating angular into my aspnet core project. Issue is, I can't seem to render my component(which I used as a tag in my .cshtml view). When i checked my console for the errors, I saw that it came with the runtime, polyfills, style, etc which I used in my <head> element..I removed them all, still didn't render... Is there a basic configuration I'm supposed to do before my angular component selectors can work as tags in my html? Thanks in advance

I have a problem making this code work in IE. I used "remove" but that's not the correct solution.

I'll go step by step

1. You can download the sample code here https://drive.google.com/file/d/1HGbYRMGBjl7_BFwsb10QJLlVPOGiEIBH/view
 click on page.html to see the example. Corresponding JS file is Reporting.js

2. Page loads. You see the options for the second dropdown

3. Choose, for example, LeaseNo, from the first dropdown. You see the second dropdown is enabled and you see the values in there

4. This is the line of code in Reporting.Js that does it

$('option', operatorSelect).not($("option[datatype *= '" + fieldDataType + "']", operatorSelect))
				.attr('disabled', 'disabled').remove();

Select all Open in new window

5. It used to be this line but I had to change it because this didn't work in IE11

 $('option', operatorSelect).not($("option[datatype *= '" + fieldDataType + "']", operatorSelect)).hide();

Select all Open in new window

6. This is the problem with using .remove() --> it removes the options. So now, if I choose another option from the first dropdown, the options that need to show up have been removed. Here's an example

.hide() won't work in IE11. If I use .remove...it actually removes the options. This is another example I found but I don't know how to implement it
http://jsfiddle.net/we89rx4c/13/

I need to hide/display the options and make it work for IE11, Chrome and Edge. There has to be a way to do this.

I thought about cloning the original select options and then use that whenever use chooses another option from the first dropdown..like refreshing the second dropdown with each select... but that didn't work either.  I used this var $options = $("select.fieldOperator > option").clone();

Explain how TypeScript fits into Angular?

I coded Angular 4 and am pretty sure I used TypeScript. But, I can not recall exactly where.

Please refresh my memory.

Thanks

Can't get bootstrap modal working. Just button is showing up but clicking on it doesn't do anything. Below is my app.component.html content from Angular.

<html>

<head>
  <title></title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
  <!-- Bootstrap -->
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
  <!-- Optional theme -->
  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap-theme.min.css">
  <!-- Latest compiled and minified JavaScript -->
  <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
</head>

<body>
  <div class="content-fluid base-padding-top">
    <main>


     <button type="button" class="btn btn-primary btn-large" data-toggle="modal" data-target="#myModal">Launch demo modal</button>

      <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="purchaseLabel" aria-hidden="true">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
              <h4 class="modal-title" id="purchaseLabel">Purchase</h4>
            </div>
            <div class="modal-body">
          

Select all Open in new window

…

Why am I stuck on this?! can't be that hard.

1. You can see the sample code here https://drive.google.com/open?id=1Z4CJc4mjOLZ8O8rCV3aqF2zaxrY3ZddA
Download and please just click on page.html

2.  You see the third filter.  You can click on "Add" and dynamically add rows.

3. The third filter can be a text box or a dropdown.

4. I want to get the values of that third filter (dropdown or textbox), in order. The name is "FilterValues" and "camillatest" for the dropdown select.

5. I tried this and you can see it in Reporting.js but didn't work. I'll keep working on it and if I figure it out, I'll post back. So, I want to get value of textbox or the dropdown. Whatever the user has in the third filter.

var holdValues = []; //loop thru and add to this array

	$('.portfolio').each(function (index) {

		var val = $('#portfoliothirdfilter', this).find('select[name="camillatest"]').val()
		alert(val)
		var val2 = $('select[name="camillatest"]', this).val();
		alert(val2)
	});

Select all Open in new window