Angular read component name from json and add 'this' to the name - TagMerge
4Angular read component name from json and add 'this' to the nameAngular read component name from json and add 'this' to the name

Angular read component name from json and add 'this' to the name

Asked 10 months ago
2
4 answers

You are trying to something like this, for example:

TS

componentName: any;

  data = [
    {
      name: 'MyComponent',
    },
  ];

  test(name: any) {
    this.componentName = `this.${name}`; // storing this.Mycomponent name to variable for displaying 
    return `this.${name}`;
  }

  testbtnHandle() {
    this.test('MyComponent');   // it will call the test function with MyComponent name parameter
  }

HTML

{{componentName}} // for display


<button type="button" (click)="testbtnHandle()">click</button>

Here you can check or play with code.

Source: link

0

I have added a sample JSON file in assets folder of Angular App. Have a look at the sample json example
{
"Post": "Angular Json Files",
"CanEdit": true,
"Version": 7
}
I have imported sampleJson.json in our ReadingJsonFilesComponent as shown below
import { Component, OnInit } from '@angular/core';
import SampleJson from '../../assets/SampleJson.json';

@Component({
  selector: 'app-reading-json-files',
  templateUrl: './reading-json-files.component.html',
  styleUrls: ['./reading-json-files.component.css']
})

export class ReadingJsonFilesComponent implements OnInit {

constructor() {
 console.log('Reading local json files');
 console.log(SampleJson);
}

ngOnInit() {}

}
To remove the above error,In tsconfig.json file under compiler options we need to add “resolveJsonModule” and ”esModuleInterop” configurations as true as shown below.
{  "compilerOptions": {  "resolveJsonModule": true, "esModuleInterop": true } }
One more thing you need to understand is the the imported JSON file contents are type safe. In the above json version is a number. So if you tried to change the version to string it will throw error.
SampleJson.Version= "Seven"; //throws error as Version is of type number
We need to inject HttpClient in constructor.
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

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

export class ReadingComponent implements OnInit {
 private _jsonURL = 'assets/SampleJson.json';
 constructor(private http: HttpClient) {
   this.getJSON().subscribe(data => {
    console.log(data);
   });
 }
 public getJSON(): Observable<any> {
   return this.http.get(this._jsonURL);
 }
 ngOnInit() {
 }
}

Source: link

0

The end result is a nice little component that I can just supply my JSON data source to like this:
<app-json-form [jsonFormData]="formData"></app-json-form>
From a data source that looks like this:
{
  "controls": [
    {
      "name": "firstName",
      "label": "First name:",
      "value": "",
      "type": "text",
      "validators": {
        "required": true,
        "minLength": 10
      }
    },
    {
      "name": "lastName",
      "label": "Last name:",
      "value": "",
      "type": "text",
      "validators": {}
    },
    {
      "name": "comments",
      "label": "Comments",
      "value": "",
      "type": "textarea",
      "validators": {}
    },
    {
      "name": "agreeTerms",
      "label": "This is a checkbox?",
      "value": "false",
      "type": "checkbox",
      "validators": {}
    },
    {
      "name": "size",
      "label": "",
      "value": "",
      "type": "range",
      "options": {
        "min": "0",
        "max": "100",
        "step": "1",
        "icon": "sunny"
      },
      "validators": {}
    },
    {
      "name": "lightDark",
      "label": "Do you like toggles?",
      "value": "false",
      "type": "toggle",
      "validators": {}
    }
  ]
}
To create the component you will need to run the following command:
ionic g component components/JsonForm
Modify src/app/components/json-form/json-form.component.ts to reflect the following:
import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-json-form',
  templateUrl: './json-form.component.html',
  styleUrls: ['./json-form.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class JsonFormComponent implements OnInit {

  @Input() jsonFormData: any;

  constructor() { }

  ngOnInit() {}

}
Modify src/app/components/json-form/json-form.component.ts to reflect the following:
import { Component, OnInit, Input } from '@angular/core';

interface JsonFormValidators {
  min?: number;
  max?: number;
  required?: boolean;
  requiredTrue?: boolean;
  email?: boolean;
  minLength?: boolean;
  maxLength?: boolean;
  pattern?: string;
  nullValidator?: boolean;
}

interface JsonFormControlOptions {
  min?: string;
  max?: string;
  step?: string;
  icon?: string;
}

interface JsonFormControls {
  name: string;
  label: string;
  value: string;
  type: string;
  options?: JsonFormControlOptions;
  required: boolean;
  validators: JsonFormValidators;
}

export interface JsonFormData {
  controls: JsonFormControls[];
}

@Component({
  selector: 'app-json-form',
  templateUrl: './json-form.component.html',
  styleUrls: ['./json-form.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class JsonFormComponent implements OnInit {

  @Input() jsonFormData: JsonFormData;

  constructor() { }

  ngOnInit() {}

}

Source: link

0

I am trying to get a name of a component from a json file and via a method add 'this' to its name.
import { MyComponent } from './Mycomponent';

...

MyComponent = MyComponent;


data = [
    {
      "name": "MyComponent"
    }
  ];
The method:
test(name: any) {
    return this.[name];
  }
usage example:
this.test('MyComponent');
Expected output is:
this.MyComponent
TS
componentName: any;

  data = [
    {
      name: 'MyComponent',
    },
  ];

  test(name: any) {
    this.componentName = `this.${name}`; // storing this.Mycomponent name to variable for displaying 
    return `this.${name}`;
  }

  testbtnHandle() {
    this.test('MyComponent');   // it will call the test function with MyComponent name parameter
  }

Source: link

Recent Questions on angular

    Programming Languages