How to change default behavior of ons-switch on click and switch on and off it on basis of function only.

How to integrate ons-navigator in Angular 4.
Currently it is showing the error: No OnsNaviagtor provider is specified.

My app gets zoom whenever I click on input. I am clueless how to solve this issue.
I am using Onsen 2 with my app.

I have send you 2 screenshots. Now When I push page this screenshot page 1 opens with this page and then toolbar height set like in screenshot 2 which i want.

Code i have already shared with you.

I have a page in which there are 2 tab bar like below:But when i push page ons-toolbar size go from top then bottom. Suggest the solution for this.

<ons-page style="background-color:white" ng-controller="AlarmCtrl">
    <ons-toolbar class="toolbar_clr">
        <div class="left">
            <div class="left" style="line-height: 44px">
                <ons-icon icon="ion-android-arrow-back" ng-click="pop_alarm();" size="30px" style="color:white;padding-left:10px;padding-right:10px;margin-top:7px"></ons-icon>
            </div>
        </div>
        <div class="right" ng-show="showAlarmDel">
            <ons-toolbar-button style="margin-left:-20px" ng-click="deleteall_passalarm()">
                <ons-icon icon="ion-android-delete" size="30px" style="color:white;"></ons-icon>
            </ons-toolbar-button>
        </div>
        <div class="center">
            <span style="color:white">{{currentLocale.almSet}}</span>
        </div>
    </ons-toolbar>
    <ons-tabbar position="top" var="alarm_tabbar">
        <ons-tab  page="alarmset.html" active="true">
            <span>{{currentLocale.almsett}}</span>
        </ons-tab>
        <ons-tab page="alarmhistory.html" ng-click="alarm_data()">
            <span>{{currentLocale.History}}</span>
        </ons-tab>
    </ons-tabbar>
</ons-page>

My toolbar css is this:

.toolbar_clr {
    background-color: #125073;
    /* padding-top: 10px; */
    min-height: 50px;
}

I am calling a function on click of content inside ons row. The same row also have ons-switch inside it but when i click on switch function call is not working properly. Suggest me the solution please.

<div style="margin:10px" class="cardalike">
<div style="margin-top:10px">
<!--<ons-row class="row ons-row-inner" style="padding-right:5px;" ng-click="calFirst_switch.checked()?calFirst_switch.setChecked(false):calFirst_switch.setChecked(true);">-->
<ons-row class="row ons-row-inner" style="padding-right:5px;" ng-init="calFirst_switch=false" ng-click="switch_change()">

<div style="width:50px;">

<img src="icons/calender.png" style="margin-left:13px;" class="medium_icon" />
</div>
<ons-col class="col ons-col-inner">
<div>
<span style="float:left;color:rgb(117, 108, 108)">
{{currentLocale.JourneyDate}}
</span>
<ons-switch modifier="material" style="float:right;" ng-model="calFirst_switch">
</ons-switch>
</div>
</ons-col>
</ons-row>
</div>
<div ng-if="calFirst_switch==true">
<div style="height: 35px;margin-left:50px">
<input type="text" style="width:200px;float:left;" class="form-control" datepicker-popup="{{format}}" ng-click="open($event)" ng-model="$parent.dt" is-open="status.opened" min-date="{{minnDate}}" max-date="{{maxxDate}}" datepicker-options="searchdateOptions" ng-required="true" readonly close-text="Close" />
</div>
</div>
$scope.switch_change=function()
{
if ($scope.calFirst_switch == false)
{
$scope.calFirst_switch = true;
}
else
$scope.calFirst_switch = false;
}

This issue is happening with XOLO PRIME phone and OS version is 5.0.2.

I am using Onsen 2 in my application but there is only one major issue that I am facing in android phone is that as soon as I click on input box and keyboard appears ,
suddenly all my css got distorted. This issue is not happening in case Of Onsen 1. Please help me guyz . ASAP.

I am using Onsen 2 in my application but there is only one major issue that I am facing in android phone is that as soon as I click on input box and keyboard appears suddenly all my css got distorted. This issue is not happening in case Of Onsen 1. Please help me guyz . ASAP.

I am opening a dialog but when i open it for the first time it shows angular coding part in it ,then shows properly. Plesae suggest me the solution for this.

Code is this.

<ons-dialog var="feedback" animation="none" mask-color="rgba(0, 0, 0, 0.4)" cancelable>

    <div class="dialog" style="z-index: 20001;min-width: 98%!important;">

        <ons-icon size="40px" icon="ion-ios-close-empty" class="crossicon" ng-click="hidefeedbackDialog()"></ons-icon>

        <div ng-show="showStars">


            <ons-row>

                <ons-col ng-repeat="rating in ratings">

                    <div star-rating rating-value="rating.current" max="rating.max" on-rating-selected="getSelectedRating(rating)">
                    </div>
                </ons-col>
            </ons-row>
        </div>

        <div class="main_feedback">

            <div ng-show="showMe">
                <ons-toolbar class="toolbar_clr">
                    <div class="right">
                        <ons-icon size="40px" icon="ion-ios-close-empty" style="color:white" class="crossicon" ng-click="hidefeedbackDialog()"></ons-icon>

                    </div>
                    <div class="center">
                        <span style="color:white">{{currentLocale.feedback}}</span>
                    </div>
                </ons-toolbar>

                <ons-row>
                    <ons-col ng-repeat="rating in ratings">

                        <div star-rating rating-value="rating.current" max="rating.max" style="margin: 38px 0 0 0;" on-rating-selected="getSelectedRating(rating)">
                        </div>
                    </ons-col>
                </ons-row>
                <div id="rcorners1">

                    <div>
                        <ul class="feedMessage" ng-repeat="x in myData | orderBy:'CreateDate'">
                            <li class="messagebox" ng-show="x.IsAdmin==false">
                                <p class="msgg">  {{ x.Message}} </p>
                                <p class="date"> {{x.DateDisplayed }}</p>

                            <li class="messagebox1" ng-show="x.IsAdmin==true">
                                <p class="msgg">  {{ x.Message}} </p>
                                <p class="date"> {{x.DateDisplayed }}</p>

                        </ul>

                    </div>

                </div>

                <div class="msg ">
                    {{currentLocale.feedMessage}}!.

                </div>

                <ul class="asFedback">
                    <li style="padding-top:0px;">
                        <textarea placeholder="Add Your Feedback" ng-model="feedback.text"></textarea>
                        <img src="images/send.png" class="sendimage" ng-click="send_feedback(feedback)">
                    </li>
                </ul>


                <ons-dialog var="dialogplay" animation="none" mask-color="rgba(0, 0, 0, 0.4)">
                    
                        <div style="text-align: center; padding: 5px;">
                            <p style="color:#125073;margin:3px">
                                Redirecting to Play Store.
                            <p align="center" style="margin:3px"> <ons-icon icon="ion-load-c" size="25px" spin="true" style="margin-top:5px"></ons-icon></p>

                            <button type="button" class="fedokButton" ng-click="click('Rate Us');closeDialog()">{{currentLocale.ok}}</button>

                            <button type="button" class="fedcancelButton" ng-click="stopTimer()">{{currentLocale.no}}</button>
                        </div>
                        
          </ons-dialog>

            </div>
        </div>
    </div>
</ons-dialog>

And to open it
code is this

 $scope.showFeedback = function () {
        var feedbackDlg = "Feedback.html"
        if (!$scope.dialogs[feedbackDlg]) {
            ons.createDialog(feedbackDlg, { parentScope: $scope }).then(function (dialog) {
                $scope.dialogs[feedbackDlg] = dialog;
                dialog.show();
            });
        }
        else {
            $scope.dialogs[feedbackDlg].show();
        }
        $scope.notify();
    }