Component won't display just its own HTML - html
The stock Angular app.component.html
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
<!-- * * * * * * * * * * * The content below * * * * * * * * * * * -->
<!-- * * * * * * * * * * is only a placeholder * * * * * * * * * * -->
<!-- * * * * * * * * * * and can be replaced. * * * * * * * * * * * -->
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
<!-- * * * * * * * * * Delete the template below * * * * * * * * * * -->
<!-- * * * * * * * to get started with your project! * * * * * * * * -->
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
<style>
/*
Lots of unrelated stock Angular CSS
*/
</style>
<!-- Lots of unrelated HTML-->
<a routerLink="/employee-form" class="card" target="_blank" rel="noopener">
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><g><rect fill="none" height="24" width="24"/></g><g><g><path d="M14.73,13.31C15.52,12.24,16,10.93,16,9.5C16,5.91,13.09,3,9.5,3S3,5.91,3,9.5C3,13.09,5.91,16,9.5,16 c1.43,0,2.74-0.48,3.81-1.27L19.59,21L21,19.59L14.73,13.31z M9.5,14C7.01,14,5,11.99,5,9.5S7.01,5,9.5,5S14,7.01,14,9.5 S11.99,14,9.5,14z"/><polygon points="10.29,8.44 9.5,6 8.71,8.44 6.25,8.44 8.26,10.03 7.49,12.5 9.5,10.97 11.51,12.5 10.74,10.03 12.75,8.44"/></g></g></svg>
<span>Open Employee Form</span>
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>
</a>
<!-- Lots of unrelated HTML-->
<router-outlet></router-outlet>
When I place my extra a tag:
<a routerLink="/employee-form" class="card" target="_blank" rel="noopener">
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><g><rect fill="none" height="24" width="24"/></g><g><g><path d="M14.73,13.31C15.52,12.24,16,10.93,16,9.5C16,5.91,13.09,3,9.5,3S3,5.91,3,9.5C3,13.09,5.91,16,9.5,16 c1.43,0,2.74-0.48,3.81-1.27L19.59,21L21,19.59L14.73,13.31z M9.5,14C7.01,14,5,11.99,5,9.5S7.01,5,9.5,5S14,7.01,14,9.5 S11.99,14,9.5,14z"/><polygon points="10.29,8.44 9.5,6 8.71,8.44 6.25,8.44 8.26,10.03 7.49,12.5 9.5,10.97 11.51,12.5 10.74,10.03 12.75,8.44"/></g></g></svg>
<span>Open Employee Form</span>
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>
</a>
To my new employee-form.component.html everything works fine, except for the fact that I want my a to my custom component to show only its HTML:
<form #employeeForm="ngForm" (ngSubmit)="submitForm(employeeForm.value)">
<div>
<label for="firstName">First Name:</label>
<input type="text" id="firstName" name="firstName" ngModel>
</div>
<div>
<label for="employeeId">Employee Id:</label>
<input type="text" id="employeeId" name="employeeId" ngModel>
</div>
<button type="button" (click)="submitForm(employeeForm.value)">Submit</button>
</form>
However, it just shows the component on the existing screen.
app.component.html seems to be configured correctly. My routing seems to work find because my component appears and submits data to my API just fine.
I understand the idea of having components and it being a SPA, but in Angular surely you still want to post to new pages on a button click with none of the previous HTML, how is this accomplished?
Related
Error in WITH RECURSIVE while troubleshooting hacker rank
Summary HackerRank Problem
(1) Draw Triangle 1
P(5) :
* * * * *
* * * *
* * *
* *
*
This is example and i have to make this P(20)
WITH RECURSIVE stars (n,star) AS(
SELECT 39,LEFT('* * * * * * * * * * * * * * * * * * * *',39)
UNION ALL
SELECT n-2,LEFT('* * * * * * * * * * * * * * * * * * * *',n-2)
FROM stars
WHERE n>1
)
SELECT star
FROM stars
I solved question of Draw the Triangle 1 in this way.
(2) Draw Triangle 2
P(5):
*
* *
* * *
* * * *
* * * * *
This is example and i have to make this P(20)
However, this does not work in Draw THE Triangle 2
WITH RECURSIVE stars (n,star) AS(
SELECT 1, LEFT('* * * * * * * * * * * * * * * * * * * *',1)
UNION ALL
SELECT n+2, LEFT('* * * * * * * * * * * * * * * * * * * *',n+2)
FROM stars
WHERE n<38
)
SELECT star
FROM stars
WITH RECURSIVE stars (n,star) AS(
SELECT 1,'*'
UNION ALL
SELECT n+1, CONCAT(star,' *')
FROM stars
WHERE n<20
)
SELECT star
FROM stars
I tried using LEFT() by changing the number just like Triange 1, but the HackerRank site showed a message like 'ERROR 1406 (22001) at line 1: Data too long for column 'star' at row 1' In my personal mysql, I only got OK, but I couldn't see the result table.
If the data is too long and it is an error, shouldn't I meet the same error in the first problem?
Is there something I don't know ?
Take a good look at outputs of queries for "triangle 1" and "triangle 2".
What is the difference? That's right, rows for the "triangle 2" query are in reverse order.
Which value in the query for "triangle 1" defines the order of rows? That's right, it's n.
How can I modify the query for "triangle 1" so that it outputs rows in reverse order? That's right, since the value of n in the first row is 39 and the last one is 1 (the rows are ordered by n in descending order), just reverse rows order by adding ORDER BY n.
So the query for "triangle2" should look like
WITH RECURSIVE stars(n, star) AS(
SELECT 39, LEFT('* * * * * * * * * * * * * * * * * * * *', 39)
UNION ALL
SELECT n-2, LEFT('* * * * * * * * * * * * * * * * * * * *', n-2)
FROM stars
WHERE n > 1
)
SELECT star
FROM stars
ORDER BY n
Just check it
Can't find where does the extra space on the right of my site comes from
I've just noticed that on one of my websites you can scroll horizontally and it's literally empty space on the right of the content. No idea where this comes from. I've tried adding the following CSS, in order to highlight the element that's causing the issue but it didn't:
* {
background: black !important;
}
* * {
background: pink !important;
}
* * * {
background: red !important;
}
* * * * {
background: blue !important;
}
* * * * * {
background: green !important;
}
* * * * * * {
background: grey !important;
}
* * * * * * * {
background: brown !important;
}
* * * * * * * * {
background: beige !important;
}
* * * * * * * * * {
background: black !important;
}
* * * * * * * * * * {
background: pink !important;
}
* * * * * * * * * * * {
background: red !important;
}
* * * * * * * * * * * * {
background: blue !important;
}
* * * * * * * * * * * * * {
background: green !important;
}
* * * * * * * * * * * * * * {
background: grey !important;
}
* * * * * * * * * * * * * * * {
background: brown !important;
}
* * * * * * * * * * * * * * * * {
background: beige !important;
}
* * * * * * * * * * * * * * * * * {
background: lightgreen !important;
}
* * * * * * * * * * * * * * * * * * {
background: lightcoral !important;
}
* * * * * * * * * * * * * * * * * * * {
background: yellow !important;
}
* * * * * * * * * * * * * * * * * * * * {
background: purple !important;
}
* * * * * * * * * * * * * * * * * * * * * {
background: rebeccapurple !important;
}
* * * * * * * * * * * * * * * * * * * * * * {
background: sandybrown !important;
}
* * * * * * * * * * * * * * * * * * * * * * * {
background: saddlebrown !important;
}
* * * * * * * * * * * * * * * * * * * * * * * * {
background: navajowhite !important;
}
* * * * * * * * * * * * * * * * * * * * * * * * * {
background: orange !important;
}
* * * * * * * * * * * * * * * * * * * * * * * * * * {
background: orangered !important;
}
* * * * * * * * * * * * * * * * * * * * * * * * * * * {
background: greenyellow !important;
}
You can see the problem here.
I don't know how else to debug this.
Any ideas appreciated.
You can solve the issue quickly with this:
#wrapper, .container-inner {
min-width: 320px;
overflow: hidden;
}
Check and let me know.
Below code cause for extra space.
.col-3cm .main-inner{padding-left: 340px;}
Solved it with this:
html {
max-width: 100%;
overflow-x: hidden;
}
send dot clicks to server using html5
I am trying to echo user input. Idea is user clicks the dots to draw a shape and then clicks submit. I receive the 'dots' he clicked, and then I reply back the dot numbers. example -- A B C D E F G H I J 1 * * * * * * * * * * 2 * * * * * * * * * * 3 * * * * * * * * * * 4 * * * * * * * * * * 5 * * * * * * * * * * If a user clicks the '+' ones -- A B C D E F G H I J 1 * * * * * * * * * * 2 * * * * * + * + * * 3 * * * * * + * + * * 4 * * * * * * + * * * 5 * * * * * * * * * * and then submits the page, I then give him - F2F3G4H3H2 (in sequence of how he clicked). My issue is how to send the data to server? And, I can manage to do on click color change to make sure that the user clicked it. Or, even when he clicks, there is a line connecting the dots (like a stick shape). How to do the same in HTML5, wherein every click he does on dots, is registered and then sent to the server.
One way would be to encode the state and then send it using an XMLHTTPRequest to the server.
MYSQL - Select most recent of column type entry
I have a table with columns: s_Id (primary int), sup_type (int), sup_date (datetime), sup_req (int) Values in sup_type so far range from 0-5. How can I extract the most recent entry (by sup_date) of each sup_type (0-5). * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * s_Id * sup_type * sup_date * sup_req * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * 1 * 0 * 2012-06-15 10:13:21 * 4 * * 2 * 0 * 2012-06-15 11:22:01 * 4 * * 3 * 1 * 2012-06-15 13:23:32 * 4 * * 4 * 2 * 2012-06-16 08:04:29 * 4 * * 5 * 1 * 2012-06-16 16:23:24 * 4 * * 6 * 1 * 2012-06-17 13:14:05 * 4 * * 7 * 3 * 2012-06-18 13:37:55 * 4 * * 8 * 4 * 2012-06-19 13:21:52 * 4 * * 9 * 4 * 2012-06-20 16:15:19 * 4 * * 10 * 5 * 2012-06-20 16:17:37 * 4 * * 11 * 0 * 2012-06-20 16:21:53 * 4 * * 12 * 1 * 2012-06-20 16:28:13 * 4 * * 13 * 3 * 2012-06-21 12:23:29 * 4 * * 14 * 3 * 2012-06-22 07:26:41 * 4 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * I want to extract * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * s_Id * sup_type * sup_date * sup_req * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * 4 * 2 * 2012-06-16 08:04:29 * 4 * * 9 * 4 * 2012-06-20 16:15:19 * 4 * * 10 * 5 * 2012-06-20 16:17:37 * 4 * * 11 * 0 * 2012-06-20 16:21:53 * 4 * * 12 * 1 * 2012-06-20 16:28:13 * 4 * * 14 * 3 * 2012-06-22 07:26:41 * 4 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * Thanks.
SELECT b.* FROM ( SELECT sup_type, MAX(sup_date) AS maxsupdate FROM tbl GROUP BY sup_type ) a INNER JOIN tbl b ON a.sup_type = b.sup_type AND a.maxsupdate = b.sup_date ORDER BY b.s_Id
MySQL, select rows where a parameter value depends on the value that it has in a different row
I have a table where I can find the same parameter in subsequent rows (See Example A). I need a query to select only the rows where the value is different from the previous row (See Example B), something like SELECT * FROM tableName WHERE Par(id)!=Par(id-1) It shouldn't be difficult but I'm new to MySQL (and databases in general) and I haven't found an command or an example for this. Example A Example B ********* ********* *ID *Par* **ID*Par* ********* ********* *1 * a * *5 * a * *2 * a * *6 * g * *3 * a * *7 * f * *4 * a * *8 * d * *5 * a * *9 * f * *6 * g * *10 * h * *7 * f * *11 * j * *8 * d * *12 * f * *9 * f * *17 * f * *10 * h * *18 * d * *11 * j * *19 * s * *12 * f * *20 * g * *13 * f * *21 * t * *14 * f * *22 * g * *15 * f * *16 * f * *17 * f * *18 * d * *19 * s * *20 * g * *21 * t * *22 * g *
Try this: SELECT t.id,t.par FROM your_table t WHERE t.par <> (SELECT par FROM your_table WHERE id = t.id + 1)
SELECT DISTINCT Par FROM table_name http://www.w3schools.com/sql/sql_distinct.asp