What steps are needed to develop a TypeScript component within Angular framework?

I've been attempting to develop an Angular Component in TypeScript. I'm trying to utilize document.createElement to build a toolbar within my component, but it's not appearing.

Below is my Component code:

import {Directive, Component, bootstrap} from 'angular2/angular2';
import {ToolbarGroup} from './toolbar';

@Component({
  selector: 'option-menu',
  templateUrl: 'templates/options.html'
})

class OptionMenu {
  ToolbarGroup = new ToolbarGroup;
  constructor() {
  }
  /**
   * @argument Node for return this count of child
   * @returns count of child in a node
   */
  public getChildCount(node) {
    var number = node.childNodes.length;
    return number;
  }

  // Remaining code goes here...

}

bootstrap(OptionMenu,[ToolbarGroup]);

Here's the component I aim to create:

 import {Inject, Injectable, Directive, View, Component, bootstrap} from 'angular2/angular2';

    @Component({
      selector: 'toolbar',
      templateUrl: 'templates/toolbar.html'

    })
    export class ToolbarGroup {


    }
    bootstrap(ToolbarGroup);
angulartypescript

Answer №1

To generate dynamic elements, I resolved the following:

<div class="ui grid contructPage">
    <div class="two wide column">
        <div class="ui vertical fluid tabular menu">
            <a href="javascript:void(0)"><h4><i class="sidebar icon"></i></h4></a>
            <h4 class="ui horizontal divider header">
                <i class="tag icon"></i>
                Columns
                </h4>
            <a href="javascript:void(0)" (click)="createOneLineOneColumn()" class="ui primary button item">|</a>
            <a href="javascript:void(0)" (click)="createOneLineTowColumn()" class="ui primary button item">| |</a>
            <a href="javascript:void(0)" (click)="createOneLineThreeColumn()" class="ui primary button item">| | |</a>
            <!--<a href="javascript:void(0)" (click)="createOneLineFourColumn()" class="ui primary button item">| | | |</a>-->

            <h4 class="ui horizontal divider header">
                <i class="tag icon"></i>
                        Options
            </h4>
            <a id="drag1" onclick="preview()" href="javascript:void(0)" class="ui primary button item">Preview<i class="unhide icon"></i></i></a>

            <a id="drag1" (click)="saveContent()" href="javascript:void(0)" class="ui primary button item">Save<i class="disk outline icon"></i></a>

            <a id="drag2" (click)="destroy()" href="javascript:void(0)" class="ui primary red button item">Clean<i class="trash outline icon"></i></a>


        </div>
    </div>

    <div class="thirteen wide stretched column">
        <div class="ui segment">
            <div class="ui equal width grid container " id="{{[DVEContainer.componentId]}}" *ng-for="#page of DVEContainer.components;#i=index">

                <div class="column insideColConttent title" id="{{[page.componentId]}}" *ng-for="#page of page.components;">
                    <div class="ui buttons">
                        <button href="javascript:void(0)" class="ui button" (click)="createVideo(page)"><i class="film icon"></i></button>
                        <button href="javascript:void(0)" class="ui button" (click)="createImage(page)"><i class="photo icon"></i></button>
                        <button href="javascript:void(0)" class="ui button" (click)="createText(page)" onclick="initEditor()"><i class="write icon"></i></button>
                        <button href="javascript:void(0)" class="ui button" (click)=" removeElements(page)"><i class="erase icon"></i></button>
                    </div>
                    <div *ng-for="#page of page.components;">
                        <div *ng-if="[page.getHtmSelector()] =='textarea'">
                            <text-component>

                            </text-component>

                        </div>
                        <div *ng-if="[page.getHtmSelector()] =='img'">
                            <input type="text" [(ng-model)]="page.href" laceholder="Img Source" /> 
                            <img class="ui image" src="{{[page.href]}}" />
                        </div>
                        <div *ng-if="[page.getHtmSelector()] =='video'">
                            <input type="text" [(ng-model)]="page.href" (keyup)="showVideo(page)" onkeyup="resizeIframe()" placeholder="Video Source"
                            />

                            <br>

                            <iframe  src="{{[page.href]}}">
                            </iframe>
                        </div>
                    </div>
                </div>

            </div>

        </div>
    </div>
</div>
<div class="preview ui grid previewPage" style="display: none;">
<div class="ui grid">
  <div class="sixteen wide column">
      <a id="drag1" onclick="preview()" href="javascript:void(0)" class="ui primary button item right floated">Preview<i class="unhide icon"></i></i></a>
  </div>  
</div>

    <div class="ui equal width grid container " id="{{[DVEContainer.componentId]}}" *ng-for="#page of DVEContainer.components;#i=index">

        <div class="column insideColConttent title" id="{{[page.componentId]}}" *ng-for="#page of page.components;">

            <div *ng-for="#page of page.components;">
                <div *ng-if="[page.getHtmSelector()] =='textarea'">
                    <p>
                        {{[page.value]}}
                    </p>
                </div>
                <div *ng-if="[page.getHtmSelector()] =='img'">
                    <img class="ui image" src="{{[page.href]}}" />
                </div>
                <div *ng-if="[page.getHtmSelector()] =='video'">
                    <iframe src="{{[page.href]}}">
                    </iframe>
                </div>
            </div>
        </div>

    </div>

</div>

And the main class:

import {Directive, Component, bootstrap, Inject, View, NgFor, NgIf, EventEmitter,
CORE_DIRECTIVES, FORM_DIRECTIVES, NgClass, NgStyle} from 'angular2/angular2';
import {Http, Response, HTTP_PROVIDERS, Headers} from 'angular2/http';
import{TextComponentDirective} from './Directives/TextComponentDirective';

//import {NgGrid,NgGridItem} from './Directives/NgGrid';
//API
import {DVE} from './API/DVE';


@Component({
  selector: 'dve-page',
  templateUrl: 'templates/DvePage.html',
  inputs: ['DVEContainer: DVEContainer', 'page:page', 'col:col', 'imagem:imagem', 'video:video'],
  directives: [NgFor, NgIf, NgClass, NgStyle, CORE_DIRECTIVES, FORM_DIRECTIVES,TextComponentDirective],

})

class OptionMenu {
  bosta = new DVE.Core.Plugin.bostaBugada();

  // Constructor and methods as per original text

}

bootstrap(OptionMenu);

Answer №2

It's not recommended to approach it this way. Remember that Angular employs virtual DOM, and any modifications to the DOM tree should be carried out through a specific API such as ElementRef. Have you considered placing all of the code directly into the HTML template instead of generating it within the component?

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

I've encountered an error and am unsure of how to fix it

index.ts:5:8 - error TS1192: Module '"D:/Calculator/node_modules/@types/chalk-animation/index"' does not have a default export. 5 import chalkAnimation from "chalk-animation"; ~~~~~~ index.ts:22:1 - error TS1378: To ...

node.jstypescriptcalculator

Is there a way to identify the items that have been removed and added in an array by comparing an old array to a new array

Consider the following scenario: oldArray = [ { id: 1, position: 'DEV OM'}, { id: 2, position: 'Senior Developer'}, ] newArray = [ { id: 2, position: 'Senior Developer'}, { id: 3, position: 'Junior Devel ...

arraystypescript

Is there a way in typescript to transform empty strings into null values?

As a newcomer to TypeScript, I have been exploring it for some time now. I am working with two interfaces, one is fetching data from a database that I do not have control over and cannot guarantee the values returned are as expected. // Retrieved from the ...

node.jstypescript

When interacting with a <select> element, the behavior of test script execution varies between Firefox and Chrome

I've encountered an unusual problem that I need help describing and solving. Your assistance is greatly appreciated! The issue I'm facing involves Testcafe behaving differently when running the same test script on various browsers. testcafe: ...

typescriptvisual-studio-codeautomated-testse2e-testingtestcafe

Typescript Error: Issue encountered while passing props. Unable to access properties as they are undefined

I encountered an issue where I created an object of a certain type and attempted to pass it to a component. However, when passing the props, I received an error message stating that it cannot read properties of undefined ('stepOne'). The error sp ...

reactjstypescript

Is there a way to dynamically transfer projected content to child components without using <ng-content> for rendering?

Let's say I have a <hook> component that dynamically creates a child, how can I transfer the content (which Angular would usually render inside a <ng-content></ng-content> in the hook's template) as ng-content to that child comp ...

angularng-contentangular-content-projection

Having trouble locating a nested component through multiple ng-content in Angular 8?

Currently, I am encountering an issue while attempting to locate components nested within sub child components. To illustrate what I am aiming for, here is an example: import { Component, OnInit, ContentChildren, ElementRef, QueryList } from '@angul ...

angulartypescript

Definition of union types in JavaScript using Typescript

Looking for assistance in creating a d.ts file for the union-type library found at https://github.com/paldepind/union-type Consider the following union type: let Maybe = Type({ Nothing: [] , Just: [Number] }) I am interested in setting up compi ...

javascripttypescriptdefinitelytyped

Angular 2 project experiencing issues with implementing Bootstrap styles

After adding Bootstrap CSS to angular-cli.json - styles, I noticed that the styles were not being applied to my project. I also added it in package.json and did an npm install. Can anyone suggest a solution? Here is a snippet from angular-cli.json: ...

angularbootstrap-4

Tips for extracting a particular subset from an array containing JSON objects using Angular

Hey there, I have a collection of JSON objects and I've been able to showcase them one by one using Angular (in this case, I'm building a blog). The JSON objects are retrieved through an HTTP GET request. On my landing page, I display the blog ...

angular

Tips for crafting a TypeScript function signature for a bijection-generating function

One of my functions involves taking a map and generating the bijection of that map: export function createBijection(map) { const bijection = {}; Object.keys(map).forEach(key => { bijection[key] = map[key]; bijection[map[key]] = key; }); ...

typescript

Angular 8 - Unraveling the Mystery Behind its Initial Page Discovery

I am facing an issue with my Angular 8 application where the login page is being displayed at startup. I have checked the routing module but couldn't find anything that explicitly sets this page as the startup page. Any suggestions on what might be c ...

angular

Migration of old AngularJS to TypeScript in require.js does not recognize import statements

I am looking to transition my aging AngularJS application from JavaScript to TypeScript. To load the necessary components, I am currently utilizing require.js. In order to maintain compatibility with scripts that do not use require.js, I have opted for usi ...

javascriptangularjstypescriptrequirejsumd

Creating a Dynamic Table with Angular 6 - Automating the Population of Content Values

I have a task of populating a table with data from a JSON file. Take a look at the following code snippet: <table> <thead> <tr> <th *ngFor="let datakeys of listData[0] | keys">{{ datakeys }}</th> </tr> < ...

angulartypescriptangular6

Property referencing for change detection is a valuable technique

I'm struggling to update my template when changing a boolean property that is referenced in another array property. I expected the changes to reflect in my template, but they are not showing up. Upon initial load, everything appears in its initial st ...

javascriptangulartypescript

Insert HTML elements into the variable that holds data retrieved from firestore

Recently, I received a Firestore response in the following format: https://i.sstatic.net/49dX9.png Within my TypeScript variable {{task.title}}, I have access to this data on my component. My goal is to incorporate a hyperlink specifically on the person& ...

angulartypescriptangularfire

Is there a way to update a BehaviorSubject value without using the next method?

I am looking for a solution to update the value of my BehaviorSubject without causing any subscriptions to be triggered. I attempted the following: this.mySubject = new BehaviorSubject(newVal); Unfortunately, this approach also removes all existing subs ...

angularrxjsbehaviorsubject

Issues with Angular2 causing function to not run as expected

After clicking a button to trigger createPlaylist(), the function fails to execute asd(). I attempted combining everything into one function, but still encountered the same issue. The console.log(resp) statement never logs anything. What could be causing ...

javascriptangulartypescriptwebfrontend

Tips on saving a moved option item from one table to another in HTML:

Having an issue with dragging tables between different lists in Angular. The tables are generated by separate ngFor loops and I am using cdkDrag for the drag and drop functionality. The problem arises when I set an option in a dropdown and then drag the ta ...

angularangular-materialangular-cdk

Maintaining the order of subscribers during asynchronous operations can be achieved by implementing proper synchronization

In my Angular setup, there is a component that tracks changes in its route parameters. Whenever the params change, it extracts the ID and triggers a function to fetch the corresponding record using a promise. Once the promise resolves, the component update ...

javascriptangulartypescriptrxjs