I am developing a chrome extension using angular 11. For building the project I have used custom-webpack and provide the entry point to background.ts as suggested in blog: Link.
<div class="container">
<span><b>Steps</b></span><br>
<span *ngFor="let step of steps;">
{{step}}<br>
</span>
</div>
I am using the above snippet of code in my app component template. Items are getting pushed to steps array at runtime, If I log the steps array in console, I am seeing that items are being pushed to array but not rendered to UI.
Please help me to find out like how I can make use of ngfor in the chrome extension. For developing the extension, I referred to the above said link.
Related
I am trying to embed typeform into my angular application using typeform’s Embed SDK.
<div data-tf-widget="<form-id>"></div>
<script src="//embed.typeform.com/next/embed.js"></script>
But however, in my use case I need to dynamically pass the form-id which is obtained from the typeform API response to the above div element.
I have tried adding data-tf-widget="<form-id>" attribute to the element dynamically. It’s getting added but the form with the specified id is not getting rendered in the UI.
Is there are way to achieve this? or Is there any api/method/listener provided by the library, that helps me to re-render the element with the provided form-id?
If there is any API available for typeform submission, that would be helpful.
Thanks in advance.
I am trying to embed typeform into my angular application using typeform’s Embed SDK.
<div data-tf-widget="<form-id>"></div>
<script src="//embed.typeform.com/next/embed.js"></script>
But however, in my use case I need to dynamically pass the form-id which is obtained from the typeform API response to the above div element.
I have tried adding data-tf-widget="<form-id>" attribute to the element dynamically. It’s getting added but the form with the specified id is not getting rendered in the UI.
You can use the createWidget method:
<div id="tf"></div>
<link rel="stylesheet" href="//embed.typeform.com/next/css/widget.css" />
<script src="//embed.typeform.com/next/embed.js"></script>
<script>
window.tf.createWidget('<form-id>', {
container: document.getElementById('tf')
});
</script>
Have a look at the documentation for more information on how to pass more parameters, hidden fields...
I have several links in this base razor project. For some reason my links stopped working. Here is an example:
<a class="nav-link text-dark" asp-controller="Contato" asp-action="Contato">Contato</a>
My project layout is pretty simple:
When I run the project and click on the non working link it goes to this url:
https://localhost:44372/?action=Contato&controller=Contato
However, when I navigate to the correct URL it works fine:
https://localhost:44372/Contato
I did not change any routing in the program.cs and use the default pipeline stuff:
builder.Services.AddRazorPages();
app.UseRouting();
app.MapRazorPages();
Any help in this routing issue?
There are no controllers or actions in a Razor Pages app - only pages. Therefore your anchor tag helpers should use the asp-page attribute:
<a class="nav-link text-dark" asp-page="/Contato">Contato</a>
https://www.learnrazorpages.com/razor-pages/tag-helpers/anchor-tag-helper
There is a ready-made project. Backend on Yii2, the frontend is written in it. Please tell me how to add a piece of the front on ReactJS to the finished page, so that, for example, in OpenServer, when you launch the site(my project), ReactJS is displayed correctly (without using npm in the console).
In other words, how to connect ReactJS to a project?
You can make a build out of it using npm run build
and then from it you can link index.html
Add React in One Minute
In this section, we will show how to add a React component to an existing HTML page. You can follow along with your own website, or create an empty HTML file to practice.
There will be no complicated tools or install requirements — to complete this section, you only need an internet connection, and a minute of your time.
Step 1: Add a DOM Container to the HTML
First, open the HTML page you want to edit. Add an empty tag to mark the spot where you want to display something with React. For example:
<!-- ... existing HTML ... -->
<div id="like_button_container"></div>
<!-- ... existing HTML ... -->
Step 2: Add the Script Tags
Next, add three tags to the HTML page right before the closing tag:
<!-- ... other HTML ... -->
<!-- Load React. -->
<!-- Note: when deploying, replace "development.js" with "production.min.js". -->
<script src="https://unpkg.com/react#16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.development.js" crossorigin></script>
<!-- Load our React component. -->
<script src="like_button.js"></script>
</body>
enter link description here
While trying to customise the unified (Sign In & Sign Up page), I have this simple HTML in my unified.html template (fragment):
<div class="col-4 login-box gradient-background">
<div>
<h1>WELCOME TO<br/>SuperFancyProductName<sup>®</sup></h1>
</div>
<div id="api" data-name="Unified"></div>
</div>
However, when Azure AD B2C renders the Sign In page, the element is stripped of from inside the h1 element, with this result (fragment):
<div>
<h1>WELCOME TO<br>SuperFancyProductName®</h1>
</div>
In our case, this does not allow us to properly align the ® symbol.
Is there any documentation on what tags are allowed in the template html and how this template transformation actually works?
There is a subset of HTML that is allowed but is not documented.
It looks like the superscript tag is not allowed here. For reference, see this Github issue.
The docs team is still working on an update to show what's allowed.
You can upvote some of the requests in User Voice or create your own request: https://feedback.azure.com/forums/169401-azure-active-directory/suggestions/31173091-improve-the-tag-filtering-on-the-b2c-custom-ui-tem
I'm building some pages in liferay 6.1 GA3, so recently I was in need of embedding liferay web content portlets in an other web content portlet for this I use something like :
<div class="somecontent_stuff">
<runtime-portlet name="56" instance="hj33" queryString=""/>
</div>
<div class="some other content">
<runtime-portlet name="56" instance="ze33" queryString=""/>
</div>
<div id="part_right">
<runtime-portlet name="56" instance="nj33" queryString=""/>
</div>
And this is working perfectly fine, but when I use my web content in multiple page I have the change instance id manually and for every page, which is exhausting and risky (because I have lot of pages like this ).
Is there any way to generate this code automatically ?
Capture the instance id of your embedded portlet using a web form. See this for more info