NativeScript Angular

RadDataForm Getting Started

In this article, you will learn to get started with the DataForm plugin for NativeScript: how to initialize the dataform.


Run the following command to add the plugin to your application:

tns plugin add nativescript-ui-dataform

Adding a RadDataForm to Your Component's template

Before proceeding, make sure that the NativeScriptUIDataFormModule from the nativescript-ui-dataform plugin has been imported in an ngModule in your app. For example:

import { NativeScriptUIDataFormModule } from "nativescript-ui-dataform/angular";
    schemas: [NO_ERRORS_SCHEMA],
    imports: [
    declarations: [
export class DataFormExamplesModule { }


Let's start with the Component in which we will place our RadDataForm instance.

<RadDataForm tkExampleTitle tkToggleNavButton [source]="person"></RadDataForm>
import { Component, OnInit } from "@angular/core";
import { Person } from "../data-services/person";

    selector: "tk-dataform-getting-started",
    templateUrl: "dataform-getting-started.component.html"
export class DataFormGettingStartedComponent implements OnInit {
    private _person: Person;

    constructor() {

    ngOnInit() {
        this._person = new Person("John", 23, "", "New York", "5th Avenue", 11);

    get person(): Person {
        return this._person;


NativeScriptUI-DataForm-Getting-Started-Android NativeScriptUI-DataForm-Getting-Started-iOS