# Titanium Angular - Limitations and Workarounds

# TypeScript API

The TypeScript type definitions are generated from our API documentation. They are brand new and Titanium Angular is the first project to makes uses of those typings. We couldn't possibly test all available APIs for the first preview release so you may encounter some typings that are just wrong or they behave differently than you may know it from JavaScript. In those cases the easiest workaround is to explicitly cast the variable to the any type, so you can do whatever you want with it.

Casting Titanium types to any

const view = Titanium.UI.createView();
// cast only for a single method call or property access
(<any>view).callAnythingOnTheView();
// cast to a new variable of type any
const castedView = <any>view;

# Working with Titanium elements

The basic features of all elements under the UI namespace are supported as of now. However, some platform specific views are still missing. Please refer to the following list to see which elements are NOT yet supported in templates (you can still create them programmatically in your components):

• iOS

  • CoverFlowView

  • SplitWindow

# Accessing the Titanium view/proxy of template elements

Sometimes you need to access the underlying Titanium view/proxy of template elements. To do so you can use the ViewChild (opens new window)/ViewChildren (opens new window) decorators from Angular in combination with the AfterViewInit (opens new window) lifecycle hook. First assign a template reference variable to the element you want to access and then retrieve the Titanium object instance via the .nativeElement.titaniumView property.

@Component({
  template: `
    <Label #myLabel></Label>
  `
})
class MyComponent implements AfterViewInit {
  @ViewChild('myLabel') labelRef: ElementRef;

  ngAfterViewInit() {
    const myLabel = this.labelRef.nativeElement.titaniumView as Titanium.UI.Label;
    myLabel.center = {x: 50, y: 50};
  }
}

# Configuring template elements programmatically

One thing you may be missing if you are familiar with Alloy are some convenient features to configure your views directly from the template. For example, in Alloy you can do the following to configure a text fields button:

<Alloy>
    <Window>
      <TextField id="textfield" platform="ios">
        <LeftButton>
          <Button onClick="sayHi" class="textButton">left</Button>
        </LeftButton>
        <RightButton>
          <Button onClick="doAlert" class="textButton">right</Button>
        </RightButton>
      </TextField>
    </Window>
</Alloy>

Titanium Angular currently does not currently support this, but it is on our To-Do list. In the meantime you can utilize the AfterViewInit lifecycle hook of your component to further configure it's view.

@Component({
  template: `
    <Window>
      <TextField #textfield platform="'ios'"></TextField>
    </Window>
  `
})
class ExampleComponent implements AfterViewInit {
  @ViewChild('textfield') textFieldRef: ElementRef;

  ngAfterViewInit() {
    const textField = this.textFieldRef.nativeElement.titaniumView;
    textField.leftButton = Ti.UI.createButton({title: 'left', height: 24, width: 24});
    textField.leftButton.addEventListener('click', () => { });
    textField.rightButton = Ti.UI.createButton({title: 'right', height: 24, width: 24});
    textField.rightButton.addEventListener('click', () => { });
  }
}

# Titanium Router

Currently you cannot use modal windows with the Titanium router.