How to use ngx-countdown-timer for time h:m:s only? - angular6

How can i use ngx-countdown-timer for time h:m:s only?
<div *ngFor="let i of dummy">
<h1 style="margin-left: 17%; color:#df3b3b">
<countdown-timer [end]="i.times"></countdown-timer>
</h1>
</div>

the author of ngx-countdown-timer doesn't provide much docs so I went through his source code. The author doesn't seem to have an output format either. Perhaps you can raise an issue with the Github Repo itself.
Other than that, you might need to write code to grab the innerHTML of countdown-timer every second and convert the string to the format that you want.

Related

Atom autocomplete adding a <

When using Atom autocomplete, it adds an additional <.
Example <div (then I hit tab to use auto complete) generates
<<div class="">
</div>
I've searched around but sadly cannot find anything about atom adding extra characters. I'm sure this is something super simple and I am overlooking it... please let me know, thanks!
I found this by trial and error... but basically, instead of typing <html and then auto completing just type html and then autocomplete.
Another example, instead of typing <p and auto completing, just type p
Thanks everyone

Automating HTML img tagging and class assignment

I have a simple HTML site. The main element is a grid of images. They're all classed with their row and column. There are 5 columns, A-E.
<div class="grid">
<div class="box 1 a"><img src="./assets/Account-Attempt-4-1.gif"></div>
...
</div>
I would like to specify a batch of images (preferably in Windows Explorer) and have them formatted like the child elements of my grid.
Is there something out there that will do this that I'm just bad at Googling for? I'm on Windows 10.
My first thought would be to create a macro in a code editor, like Sublime Text. The macro would incorporate some method of auto incrementing the numbers at the ends of the file names (probably with the use of a plugin), but this is based off of the assumption that all of the images in the folder follow the same naming convention (e.g. image-1.jpg, image-2.jpg, image-3.jpg).
I think that a better option for you would be to do something like this answer that I found. With a little bit of tweaking, this method should be able to take all of the images inside of a defined directory and return an html file with formatted lines of code.
Best of luck to you!

Is there a way to add html attributes to an existing html element with Emmet?

I've been looking around and I can not find an answer to this.
Suppose I put the cursor right between the number 2 and the greater than sign in the following h2's opening tag.
<h2>Hello world!</h2>
And then I type .text-uppercase which gives me:
<h2.text-uppercase>Hello world!</h2>
After which I expand the abbriviation and I get
<h2 class="text-uppercase">Hello world!</h2>
Is there a way to achieve this by another method?
Maybe this works in your editor, in my personal VS Code installation, its not working, the action is Update Tag
your question is not that clear
i think you want this
var h2 = document.getElementsByTagName("h2");
h2.classList.add('text-uppercase');
now you can do it onClick or using some other trigger
happy coding!!!
hope it helps

Can Resharper 9 perform pattern search and replace on HTML markup?

I am in the process of restructuring large amounts of MVC code to use Bootstrap. The process is very tedious and error prone because it's easy to clobber the markup. The majority of the code, however, is structurally identical and it could be at least partially automated. If I could somehow search the HTML structure,
<div class="header">
<div class="content">
<h1 class="big">#Model.Foo </h1>
</div>
</div>
with
<div class="panel panel-default">
<div class="panel-body">
#Model.Foo;
</div>
</div>
I understand Resharper 9 has structural search and replace, but I couldn't find any documentation for it. I would guess that this feature would work for HTML, since Resharper can detect errors in the markup based on nesting.
EDIT:
I found some documentation on "Search with Pattern", but upon trying it, I couldn't get it to work at all following the examples. In particular, putting any value "CSS Selector" field ignored it.
It should work. In the search pattern dialog, make sure HTML is selected as the target language, and then just type the first HTML block in as the search pattern. You don't mention if the first block is an example, or exactly the code you want to search for. If it's an example, you'll need to add placeholders for other attributes and elements.
Then put the second block in the replace field. Again, if it's verbatim HTML, just copy it in. Otherwise, you can use the placeholders from the search pattern to fill the captured values in.

Adding data attribute to a Class Literal in Jade

I want to write the equivalent of this html in jade
<div class="carousel" data-transition="slide">
<div>
I wrote it like this, which is not the correct syntax
.carousel (data-transition= "slide")
I can't find anything in the docs for an answer. Thanks ahead of time your answer is greatly appreciated.
You were close, though:
.carousel(data-transition = "slide")
(leave out the space between carousel and the parentheses).