chore(angular2-meteor): add meteor support

[hongbo-miao]

I am using ng2-bootstrap in an angular2-meteor project.

First I want you know, when I use import {Alert} from 'ng2-bootstrap';, Alert works perfect.

However, when I use import {TYPEAHEAD_DIRECTIVES} from 'ng2-bootstrap';, it shows

Module '"ng2-bootstrap"' has no exported member 'TYPEAHEAD_DIRECTIVES'.

Similar problem like this.

I put the original ng2-bootstrap.d.ts here, so it is easy for you to check the problem. You can find Alert in the file, but no TYPEAHEAD_DIRECTIVES.

/// <reference path="angular2.d.ts" />
/// <reference path="meteor/meteor.d.ts" />
/// <reference path="moment/moment.d.ts" />

declare module ngBootstrap {
    //components/common.ts
    import ControlValueAccessor = common.ControlValueAccessor;
    import OnInit = core.OnInit;
    import Self = core.Self;
    import NgModel = common.NgModel;
    import TemplateRef = core.TemplateRef;
    import OnDestroy = core.OnDestroy;
    import DoCheck = core.DoCheck;
    import Host = core.Host;
    import Renderer = core.Renderer;
    import ElementRef = core.ElementRef;
    import DynamicComponentLoader = core.DynamicComponentLoader;
    interface IAttribute {
        [name: string]: any;
    }
    //components/accordion/accordion.ts
    class Accordion {
        constructor();
        closeOtherGroups(openGroup:AccordionGroup): void;
        addGroup(group:AccordionGroup): void;
        removeGroup(group:AccordionGroup): void;
    }
    class AccordionGroup implements OnInit, OnDestroy {
        public set isOpen(value:boolean);
        public headingTemplate:TemplateRef;
        //OnInit
        ngOnInit();
        //OnDestroy
        ngOnDestroy();
        public toggleOpen(event:MouseEvent): void;
    }
    class AccordionHeading {
        constructor(private group:AccordionGroup, private templateRef:TemplateRef);
    }
    //components/alert/alert.ts
    class Alert implements OnInit {
        constructor(public el:ElementRef)
        //OnInit
        ngOnInit(): void;
        onClose(): void;
    }
    //components/buttons/button-checkbox.ts
    class ButtonCheckbox implements ControlValueAccessor, OnInit {
        constructor(@Self() public cd:NgModel);
        //OnInit
        ngOnInit(): void;
        //ControlValueAccessor
        writeValue(value:any): void;
        registerOnChange(fn:(_:any) => {}):void;
        registerOnTouched(fn:() => {}):void;
    }
    //components/buttons/button-radio.ts
    class ButtonRadio implements ControlValueAccessor, OnInit {
        constructor(@Self() public cd:NgModel, public el:ElementRef);
        //OnInit
        ngOnInit(): void;
        //ControlValueAccessor
        writeValue(value:any): void;
        registerOnChange(fn:(_:any) => {}):void;
        registerOnTouched(fn:() => {}):void;
    }
    //components/carousel/carousel.ts
    enum Direction {UNKNOWN, NEXT, PREV};
    class Carousel implements OnDestroy {
        constructor();
        //OnDestroy
        ngOnDestroy(): void;
        play(): void;
        pause(): void;
        addSlide(slide:Slide): void;
        removeSlide(slide:Slide): void;
    }
    class Slide implements OnInit, OnDestroy {
        constructor(private carousel:Carousel);
        //OnInit
        ngOnInit(): void;
        //OnDestroy
        ngOnDestroy(): void;
    }
    export const CAROUSEL_DIRECTIVES:Array<any> = [Carousel, Slide];
    export const carousel:Array<any> = [Carousel, Slide];
    //components/collapse/collapse.ts
    class Collapse {
        constructor();
        toggle(): void;
        hide(): void;
        show(): void;
    }
    const ACCORDION_DIRECTIVES:Array<any>
    const accordion:Array<any>
    //components/datepicker/datepicker.ts
    class DatePicker implements ControlValueAccessor {
        constructor(@Self() public cd:NgModel);
        //ControlValueAccessor
        writeValue(obj:any): void;
        registerOnChange(fn:(_:any) => {}): void;
        registerOnTouched(fn:() => {}): void;

    }
    //components/datepicker/datepicker-popup.ts
    class DatePickerPopup implements OnInit {
        constructor(@Self() public cd:NgModel, public element:ElementRef, public renderer:Renderer, public loader:DynamicComponentLoader);
        //OnInit
        ngOnInit(): void;
        hide(cb:Function): void;

    }
    export const DATEPICKER_DIRECTIVES:Array<any> = [DatePicker, DatePickerPopup];
    export const datepicker:Array<any> = [DatePicker, DatePickerPopup];
    //components/dropdown/dropdown.ts
    class Dropdown implements OnInit, OnDestroy {
        constructor(public el:ElementRef);
        //OnInit
        ngOnInit(): void;
        //OnDestroy
        ngOnDestroy(): void;
        toggle(open?:boolean):boolean;
    }
    //components/dropdown/dropdown-menu.ts
    class DropdownMenu implements OnInit {
        constructor(@Host() public dropdown:Dropdown, public el:ElementRef);
        //OnInit
        ngOnInit():void;
    }
    //components/dropdown/dropdown-toggle.ts
    class DropdownToggle implements OnInit {
        constructor(@Host() public dropdown:Dropdown, public el:ElementRef);
        //OnInit
        ngOnInit():void;
    }
    export const DROPDOWN_DIRECTIVES: Array<any> = [Dropdown, DropdownMenu, DropdownToggle];
    export const dropdown: Array<any> = [Dropdown, DropdownMenu, DropdownToggle];
    //components/pagination/pagination.ts
    interface IPaginationConfig extends IAttribute {
    }
    class Pagination implements ControlValueAccessor, OnInit, IPaginationConfig, IAttribute {
        constructor(@Self() public cd:NgModel, public renderer:Renderer, public elementRef:ElementRef);
        //OnInit
        ngOnInit(): void;
        //ControlValueAccessor
        writeValue(value:number): void;
        registerOnChange(fn:(_:any) => {}):void;
        registerOnTouched(fn:() => {}):void;
    }
    class Pager extends Pagination implements core.OnInit {
        constructor(@Self() cd:NgModel, renderer:Renderer, elementRef:ElementRef);
    }
    export const PAGINATION_DIRECTIVES:Array<any> = [Pagination, Pager];
    export const pagination:Array<any> = [Pagination, Pager];
    //components/progressbar/progressbar.ts
    class Progress implements OnInit {
        constructor();
        //OnInit
        ngOnInit(): void;
    }
    class Bar implements OnInit, OnDestroy {
        constructor(@Host() public progress:Progress);
        //OnInit
        ngOnInit(): void;
        //OnDestroy
        ngOnDestroy(); void;
    }
    class Progressbar {
        constructor();
    }
    export const PROGRESSBAR_DIRECTIVES:Array<any> = [Progress, Bar, Progressbar];
    export const progressbar:Array<any> = [Progress, Bar, Progressbar];
    //components/rating/rating.ts
    class Rating implements ControlValueAccessor, OnInit {
        constructor(@Self() public cd:NgModel);
        //OnInit
        ngOnInit(): void;
        //ControlValueAccessor
        writeValue(value:number): void;
        registerOnChange(fn:(_:any) => {}):void;
        registerOnTouched(fn:() => {}):void;
    }
    //components/tabs/tabs.ts
    class Tabset implements OnInit {
        constructor();
        //OnInit
        ngOnInit(): void;
    }
    class Tab implements OnInit, OnDestroy, DoCheck {
        constructor(public tabset:Tabset);
        //DoCheck
        ngDoCheck():boolean;
        //OnInit
        ngOnInit(): void;
        //OnDestroy
        ngOnDestroy(): void;
    }
    class TabHeading {
        constructor(public templateRef:TemplateRef, tab:Tab)
    }
    export const TAB_DIRECTIVES:Array<any> = [Tab, TabHeading, Tabset];
    export const tabs:Array<any> = [Tab, TabHeading, Tabset];
    //components/timepicker/timepicker.ts
    class Timepicker implements ControlValueAccessor, OnInit {
        constructor(@Self() public cd:NgModel);
        //OnInit
        ngOnInit():void;
        //ControlValueAccessor
        writeValue(v:any):void;
        registerOnChange(fn:(_:any) => {}):void;
        registerOnTouched(fn:() => {}):void;
    }
    //components/tooltip/tooltip.ts
    class TooltipOptions {
        constructor(options:Object);
    }
    class TooltipContainer {
        constructor(public element:ElementRef, options:TooltipOptions);
    }
    class Tooltip implements OnInit {
        onstructor(element:ElementRef, loader:DynamicComponentLoader);
        ngOnInit(): void;
    }
    export const TOOLTIP_DIRECTIVES:Array<any> = [Tooltip, TooltipContainer];
    export const tooltip:Array<any> = [Tooltip, TooltipContainer];
    //components/typeahead/typeahead.ts
    class Typeahead implements OnInit {
        constructor(cd:NgModel, element:ElementRef, renderer:Renderer, loader:DynamicComponentLoader);
        ngOnInit(): void;
    }
}

declare module "ng2-bootstrap" {
    export = ngBootstrap;
}

[valorkin]

https://github.com/valor-software/ng2-bootstrap/blob/master/components/typeahead.ts#L8 hm, I will check again

[valorkin]

@Hongbo-Miao where did you get this .d.ts ? my has only

export * from './components/accordion';
export * from './components/alert';
export * from './components/buttons';
export * from './components/carousel';
export * from './components/collapse';
export * from './components/datepicker';
export * from './components/dropdown';
export * from './components/pagination';
export * from './components/progressbar';
export * from './components/rating';
export * from './components/tabs';
export * from './components/timepicker';
export * from './components/tooltip';
export * from './components/typeahead';
export * from './components/position';
export * from './components/common';
export * from './components/ng2-bootstrap-config';

[hongbo-miao]

@valorkin I get it from here. So I use meteor add zrbfly:ng2-bootstrap to install it.

[hongbo-miao]

@valorkin actually right now in an angular2-meteor project, the better way to get the file ng2-bootstrap.d.ts is using tsd install ng2-bootstrap (instead of just only meteor add zrbfly:ng2-bootstrap), but right now ng2-bootstrap.d.ts is not in DefinitelyTyped. So if you can help put the latest ng2-bootstrap.d.ts there, that will be great.

[valorkin]

never seen this before :)

[valorkin]

tsd has ng2-bootstrap typings oO

[hongbo-miao]

really? but when I try tsd query ng2-bootstrap, it returns

zero results

[valorkin]

huh, it is not :) actually .d.ts files provided with ng2-bootstrap should be enough tsc 1.7.5 works fine with them but, I will have to check how to use it in meteor thing

[hongbo-miao]

Oh, it is provided by another person zrbfly, just realized it, but he link the github to here. ha

[hongbo-miao]

@valorkin Hi, I changed from import {TYPEAHEAD_DIRECTIVES} from 'ng2-bootstrap'; to import {Typeahead} from 'ng2-bootstrap';, as a temporary way. Just UI does not works perfect because of the lock of another component in TYPEAHEAD_DIRECTIVES.

Right now the package for meteor is provided by another person zrbfly.

So if ng2-bootstrap can officially support meteor, that will great!

[valorkin]

@Hongbo-Miao hey, I am sorry but seems meteor is not my tool if you can create 2 things

• simple package.js for at least one of ng2-* modules
• instructions how to consume it and start playing

I will try to understood, tweak and include it in all other packages Regards, Dima

[hongbo-miao]

@valorkin Sure, I will try to package it.

[valorkin]

thx

[valorkin]

meteor 1.3 works fine with npm modules, closing