I managed to add taView items dynamically my question now is how to bind a component eg. SubComponent(which will display the right content )
My code sample
<TabView (selectedIndexChange)="onIndexChanged($event)" selectedColor="#FF0000" iosIconRenderingMode="alwaysOriginal" sdkExampleTitle sdkToggleNavButton>
<ng-container *ngFor="let tab of tabList">
<StackLayout *tabItem="tab">
----
</StackLayout>
</ng-container>
</TabView>
I tried with router-oultet in the ng-for no success
Thanks in advance
Related
How do I link a graph using a state to a form, so when the form changes the graph is automatically updated as well, even the form is not submitted yet? The graph is just using showCarrot to generate a chart.js element.
I found initialValues as fields for forms but do not know how to clue this all together. Anyone can help to save me from insanity?
Update: I figured that Ant Design form is based on field-form, still not know how this helps but it is a trail.
That's the state I set and propagate to my form and my graph
const [showCarrot, setCarrot] = useState<ICarrotArray>([]);
That's my form and table to edit the data
<Form form={form} initialValues={showCarrot} onFinish={onFinish}>
<Table
dataSource={showCarrot}
rowKey={"id"}
pagination={false}
bordered
footer={(): React.ReactElement => {
return (
<Button onClick={addCarrot}>
<PlusOutlined /> Add Carrot
</Button>
);
}}
>
...
</Table>
<br />
<Row justify="end">
<Form.Item>
<Button type="default" onClick={onReset}>
Restore
</Button>
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit" style={{ marginLeft: 8 }}>
Save
</Button>
</Form.Item>
</Row>
</Form>
Firstly I just want to understand, correct me if I'm wrong.
You set your initialValues for form which is showCarrot. Is it mean that initialValues set for some Form.Item, because usually object element inside initialValue is used as data for Form.Item by their name.
Like so
<Form
name="validate_other"
{...formItemLayout}
onFinish={onFinish}
initialValues={{
['input-number']: 3, //name of the Form.Item
['checkbox-group']: ['A', 'B'],
rate: 3.5,
}}
>
<Form.Item label="InputNumber">
<Form.Item name="input-number" noStyle>
<InputNumber min={1} max={10} />
</Form.Item>
<span className="ant-form-text"> machines</span>
</Form.Item>
But by your code it look you want set showCarrot only as table data. If so, I can't find columns in your table, look like currently error because of that. You should add there dataIndex param which will listen for your data elements by that name
How can I get first active image in ionic from restful service?
Explanation: I am trying to create Infinite Scrolling Photo in ionic and I need first image to have a class="first". Using let i = index how can I achieve this?
What I tried:
<div class="photobanner" *ngFor="let slideImage of items; let i = index">
<img class="first" src='{{slideImage[i].img}}' />
<img src='{{slideImage[i+1].img}}'>
</div>
You can do that with css. You select the first img child of the div photobanner
.photobanner > img:first-child {
//do what you want
}
Other solution, you can find here how to add condition in ngFor.
stackoverflow.com/questions/42931735/apply-a-condition-using-ngfor-and-ngif-in-angular
i'm looking for a way to add a text between the button of 'semantic:negativeAction' and the button of 'semantic:positiveAction' in the footer of a semantic content within a semantic page of 'sap.f.semantic' .
<semantic:positiveAction>
<semantic:PositiveAction text="+"/>
</semantic:positiveAction>
<semantic:negativeAction>
<semantic:NegativeAction text="-" />
</semantic:negativeAction>
Have you considered using customFooterContent aggregation in semantic page for footer
<semantic:customFooterContent>
<Button text="Approve" type="Accept" press="onAcceptPress"/>
<Label text="Test Text between two buttons"></Label>
<Button text="Reject" type="Reject" press="onRejectPress"/>
</semantic:customFooterContent>
Link:
https://sapui5.hana.ondemand.com/#/api/sap.m.semantic.SemanticPage
I want to render ion-checkbox dynamically in my html page. I tried using below:
In .ts file:
sanitizeLetterBody = (letterBody): string => {
let replaceText = "<ion-item><ion-label><b>Read and approved with initials below. </b></ion-label><ion-checkbox class='letter-initials'></ion-checkbox></ion-item>";
return letterBody.split("#PAT_SIGN_INITIAL#").join(replaceText);
}
In .html file:
<ion-row>
<ion-col class="padding-top-10 padding-left-0 padding-right-0 padding-bottom-0">
<div class="letter-body white-space-pre-line" [innerHTML]="customLetterData.LetterBody | safeHtml:'html'"></div>
</ion-col>
</ion-row>
But, the checkbox did not render in the html page like below:
Then i tried using <input type='checkbox'> like below:
sanitizeLetterBody = (letterBody): string => {
let replaceText = " <input type='checkbox' class='check-pat-initials' name='test'><b>Read and approved with initials below.</b> ";
return letterBody.split("#PAT_SIGN_INITIAL#").join(replaceText);
}
The checkbox is rendered nicely but i can't check or un-check the checkbox. May be no events are binding in this fashion.
Why can't i check or un-check the checkbox which are rendered dynamically?
Is there any different approach to achieve this?
https://i.stack.imgur.com/NnhMY.png
https://i.stack.imgur.com/NIYZm.png
I took this from a site and I'm trying to have one like this only on the right side of my page. In my page i have a header,footer and in the content area i have this ion slide box where the images will be sliding one after the other. so i want a right carousel like in the second image link..
According to the Ionic Docs you can. The ion-slide-boxelement comes with the $ionicSlideBoxDelegate service that provides helper methods to control the slides.One of these helper functions on the service is next(). this allows you to go to next slide on a button click event.All you need to do is position your button as required and use the code as below(slightly modified from documentation).
USAGE:
//Your view
<ion-view>
<ion-slide-box>
<ion-slide>
<div class="box blue">
Slide 1
</div>
</ion-slide>
<ion-slide>
<div class="box red">
Slide 2!
</div>
</ion-slide>
</ion-slide-box>
//Your button
<button ng-click="nextSlide()" class = "button-icon ion-chevron-right"></button>
</ion-view>
//In your controller
function MyCtrl($scope, $ionicSlideBoxDelegate) {
$scope.nextSlide = function() {
$ionicSlideBoxDelegate.next();
}
}